Question

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

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}
    />

Answer 1

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

方法1

您已拥有包含label和value

的可观察数组

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

然后您可以使用ObservableArray的{{1}}方法返回常规数组以用于只读目的

.peek()

方法2

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

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

在这种情况下，您可以创建一个@observable peopleData = [ {name: 'foo', _id: 123, address: 'fooville'}, {name: 'bar', _id: 345, address: 'barville'} ]值，该值也返回一个普通数组：

@computed

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

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

在这两种情况下，<Select options={this.peopleOptions} onChange={this.handleSelectChange} />都应该只更新原始数据。

如何将反应选择与mobx集成？

1 个答案:

方法1

方法2