javascript - React-chosen 引发错误

Question

我正在使用 React-chosen(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 属性)，但如果我对具有多个可能值的列表尝试这种方法，我收到此错误:

“警告:如果 multiple 为 true，则提供给 的 value 属性必须是一个数组。检查 Chosen< 的渲染方法。”任何想法为什么会发生这种情况> 最佳答案 您使用多重选择，因此 value 属性必须是一个数组(对于多重选择)使用数组作为 place_childSelectValue，或者将其放入单个元素数组中: [this.state.place_childSelectValue] 关于javascript - React-chosen 引发错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26204962/ 上一篇：javascript - 螺旋动画 JavaScript 下一篇：javascript - 如何使用 JavaScript 将脚本、链接和元标记附加到 head 上？ 相关文章： javascript - POST 几个 html &lt;input type ='button' > 的值 java - mySQL 与 javascript 的连接 reactjs - react : Why not just use styles object instead of styled-components? reactjs - Redux 形式，提供给 'value' 的类型 'number' 的无效 prop 'TextInput' ，预期为 'string' javascript - 如何用 HOC 包装每个导出的组件？ css - 抽屉组件上的类名不起作用 javascript - 使用 JS 如何获取 div 的 flex-direction 属性的值？ javascript - 如何使用 jquery .show() 在同一个父元素中应用一个函数？ javascript - Ruby on Rails 4 和 asset_path 的使用 reactjs - 将元素推送到数组时 react setstate不起作用 ©2023 IT工具网  联系我们