Question

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

然而，在JQuery中，我会做类似的事情：<select id="multi-select" data-role="multiselect" data-bind="value: my-multiselect"></select>

然后，当multiselect所在的模板将绑定到一个observable时，任何更改都会反映在该observable中。

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

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

Answer 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] };
                });
            }
        );
    }
}

使用React将Kendo小部件值绑定到Kendo模板/ observable？

1 个答案: