0

我正在搞乱 Kendo UI React，因为我有很多动态组件创建，并且能够将它们容纳在反应类中并在需要时实例化实例似乎相当不错。

但是，在 JQuery 中，我会执行以下操作：<select id="multi-select" data-role="multiselect" data-bind="value: my-multiselect"></select>

然后，当多选所在的模板绑定到可观察对象时，任何更改都会反映在该可观察对象中。

但是，我不确定 React 小部件是如何做到这一点的，因为它们的语法略有不同。到目前为止，我有一个这样呈现的多选：

            render() {
                return (
                    <div>
                        <window.KendoDropdownsReactWrapper.MultiSelect 
                            id="user-filter"
                            change={this.onChange}
                            select={this.onSelect}
                            dataSource={this.dataSource}
                            placeholder={this.placeholder}
                            value={this.values}
                            dataTextField={this.dataTextField}
                            dataValueField={this.dataValueField}
                            template={this.template}
                            tagTemplate={this.tagTemplate}
                            filter={this.filter}
                            autoClose={this.autoClose} />
                    </div>
                );
            }

我将如何设置绑定以便此多选绑定到可观察对象中的值？

4

1 回答 1

1

我相信 React 的情况不像 JQuery 和 Angular 那样简单。对我有用的解决方案是订阅 Observable 的更改并每次将新的 dataSource 传递给 MultiSelect 组件。

这是一个例子：

class MultiSelectContainer extends React.Component {
    constructor(props) {
        super(props);
        this.state = { items: [] };
    }

    render() {
        var dataSource = new kendo.data.DataSource({ data: this.state.items });

        return (
            <div className="row">
                <div className="col-xs-12 col-sm-6 example-col">
                    <MultiSelect dataSource={dataSource} />
                </div>
            </div>
        );
    }

    componentDidMount() {
        var observable = Rx.Observable.create(function (observer) {
            observer.next("Item 1");
            observer.next("Item 2");
            observer.next("Item 3");
            observer.complete();
        });
        observable.subscribe(
            value => {
                this.setState(prevState => {
                    return { items: [...prevState.items, value] };
                });
            }
        );
    }
}
于 2018-04-16T13:05:22.017 回答