javascript - react 选择引发错误

我正在使用React-chosen（https://github.com/chenglou/react-chosen，它是jQuery Chosen插件https://harvesthq.github.io/chosen/的React包装器）。
我对多选元素有疑问。

如果我这样做（在React.createClass调用内）：

    loadDataFromServer: function() {
        $.ajax({
            url: '/api/users/',
            dataType: 'json',
            success: function(data) {
                for (var i = 0; i < data.length; i++) {
                    var option = data[i];
                    var val = [option.id];
                    this.state.options.push(
                        <option key={i} value={val}>{option.name}</option>
                    );
                }
            }.bind(this),
            error: function(xhr, status, err) {
                console.error(this.props.url, status, err.toString());
            }.bind(this)
        });
    },
    getInitialState: function() {
        return {data: [], options: []};
    },
    componentDidMount: function() {
        this.loadDataFromServer();
    },
    render: function () {
        return (
            <form className="well base_well new_task_well" onSubmit={this.handleSubmit}>
                <Chosen width="300px" data-placeholder="Select..." multiple>
                    {this.state.options}
                </Chosen>
                <button type="button" className="btn add_button"  id="add_new_task_btn" type="submit">Add</button>
            </form>
         )
     }

然后一切正常（我基本上是对API进行AJAX调用，并根据结果构建一个包含多个可能值的下拉选择列表）。

但是，为了减少代码大小，我想将选择列表构建为单独的组件，如此处https://stackoverflow.com/a/25818571/2486678所述

我建立这样的组件：

var multipleSelect = React.createClass({
    propTypes: {
        url: React.PropTypes.string.isRequired
    },
    getInitialState: function() {
        return {
            options: []
        }
    },
    componentDidMount: function() {
        $.ajax({
            url: this.props.url,
            success: this.successHandler
        })
    },
    successHandler: function(data) {
        for (var i = 0; i < data.length; i++) {
            var option = data[i];
            this.state.options.push(
                <option key={i} value={option.value}>{option.name}</option>
            );
        }
    },
    render: function() {
       return this.transferPropsTo(
            <Chosen width="300px" data-placeholder="Select..." multiple>
                {this.state.options}
            </Chosen>
       )
   }
});

然后，在父组件的render方法中，将multipleSelect组件“插入”一种形式：

<multipleSelect url="/api/places"
    value={this.state.place_childSelectValue} onChange={this.place_changeHandler}
/>

尽管对于Chosen元素只有一个可能的值（不传递multiple道具），它可以很好地工作，但是，如果我对具有多个可能值的列表尝试这种方法，则会收到此错误：

“警告：如果value为true，则提供给的multiple道具必须是一个数组。请检查Chosen的渲染方法。”

任何想法为什么会发生>

最佳答案

您使用多选，因此value属性必须是一个数组（用于多选）
为place_childSelectValue使用一个数组，或者只是将他放入单个元素数组中：

[this.state.place_childSelectValue]

关于javascript - react 选择引发错误，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26204962/