Question

我正在使用React-selected（https://github.com/chenglou/react-chosen，一个用于jQuery Chosen插件的React包装器，https://harvesthq.github.io/chosen/）。我遇到了多重选择元素的问题。

如果我这样做（在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道具），但如果我对具有多个可能值的列表尝试这种方法，我会收到此错误：< / p>

“警告：如果value为真，则提供给＆lt; select＆gt;的multiple道具必须是数组。请检查Chosen的渲染方法。”

为什么会发生这种情况的想法＆gt;

Answer 1

您使用多选，因此value道具必须是数组（对于多选择）使用数组place_childSelectValue，或者只是将他放入单个元素数组中：

[this.state.place_childSelectValue]

反应选择的提升错误

1 个答案: