2

我正在使用 react-select，在我的网络应用程序中添加多选控件。http://jedwatson.github.io/react-select/ 我正在寻找一个将 mobx observables 注入控件的好例子。我遇到的第一个挑战是以异步方式初始化选项（选项是从服务器获取的，但之后我希望应用常规过滤，不需要异步选项）。有什么好的例子吗？

import Select from 'react-select';

<Select
      multi
      disabled={this.state.disabled}
      value={this.state.value}
      placeholder="Select your favourite(s)"
      options={this.state.options}
      onChange={this.handleSelectChange}
    />
4

1 回答 1

7

如 MobX 文档中所述，由于 ES5 的限制，ObservableArray仍然有一些怪癖。react-select是那些ObservableArray开箱即用的库之一。有两种方法可以解决这个问题。

方法一

你已经有一个带有labeland的可观察数组value

@observable myOptions = [
  {label: 'foo', value: 123},
  {label: 'bar', value: 345}
]

然后您可以使用ObservableArray'.peek()方法返回一个常规数组以用于只读目的

<Select
  options={this.myOptions.peek()}
  onChange={this.handleSelectChange}
/>

方法二

您有从服务器返回的其他格式的可观​​察数组。实际上，这是一种更常见的情况。

@observable peopleData = [
  {name: 'foo', _id: 123, address: 'fooville'},
  {name: 'bar', _id: 345, address: 'barville'}
]

在这种情况下，您可以创建一个@computed值，该值也返回一个普通数组：

@computed get peopleOptions() {
  return this.peopleData.map(x => ({ label: x.name, value: x._id })
}

并将 Select 组件连接到计算值，每次从服务器获取新数据时都会自动更新。

<Select
  options={this.peopleOptions}
  onChange={this.handleSelectChange}
/>

在这两种情况下，this.handleSelectChange都应该只更新原始数据。

于 2017-07-21T08:08:28.230 回答