javascript - 使用 React 将 Kendo 小部件值绑定(bind)到 Kendo 模板/可观察对象？

Question

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

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

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

但是，我不确定 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>
                );
            }

如何设置绑定(bind)以便将此多选绑定(bind)到可观察值中的值？

Answer 1

我相信 React 的情况并不像 JQuery 和 Angular 那样简单。对我有用的解决方案是订阅 Observable 的更改，并每次将新的数据源传递给 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] };
                });
            }
        );
    }
}