使用 react-select 将值传递给状态

Question

我是新手，并试图自己学习。我开始使用 react-select 在表单上创建下拉列表，现在我试图传递所选选项的值。我的状态是这样的。

this.state = {
  part_id: "",
  failure: ""
};

然后在我的渲染中

const {
  part_id,
  failure
} = this.state;

我的表单看起来有 2 个字段

<FormGroup>
  <Label for="failure">Failure</Label>
  <Input
    type="text"
    name="failure"
    placeholder="Failure"
    value={failure}
    onChange={this.changeHandler}
    required
    />
  </FormGroup>
  <FormGroup>
  <Label for="part_id">Part</Label>
  <Select
    name="part_id"
    value={part_id}
    onChange={this.changeHandler}
    options={option}
  />
  </FormGroup>

在changeHandler这个样子的

changeHandler = e => {
  this.setState({ [e.target.name]: e.target.value });
};

更改处理程序对输入工作正常，但 Select 抛出错误，说无法读取属性名称。我浏览了 API 文档，并为 Select onChange 想出了这样的东西

onChange={part_id => this.setState({ part_id })}

它将 part_id 设置为标签、值对。有没有办法只获得价值？以及我将如何实现相同的multiselect？

Answer 1

react-selectonChange 事件的返回和 value props 的类型如下

事件/价值：

null | {value: string, label: string} | Array<{value: string, label: string}>

所以错误的意思是你找不到空属性（未选择），或任何命名为name（你需要value或label）的属性

对于多项选择，它返回选项的子列表。

您可以在他们的文档中找到相关信息

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' },
];

更新

适合您的情况（单选）

• 具有上述类型的选项

const option = [
  {value: '1', label: 'name1'},
  {value: '2', label: 'name2'}
]

• 状态另存value为id

changeHandler = e => {
  this.setState({ part_id: e ? e.value : '' });
};

• 通过保存选择选定的选项项目 id

  <Select
    name="part_id"
    value={option.find(item => item.value === part_id)}
    onChange={this.changeHandler}
    options={option}
  />

对于多项选择

• 状态保存为 id 数组

changeHandler = e => {
  this.setState({ part_id: e ? e.map(x => x.value) : [] });
};

• 通过过滤器选择

  <Select
    isMulti // Add this props with value true
    name="part_id"
    value={option.filter(item => part_id.includes(item.value))}
    onChange={this.changeHandler}
    options={option}
  />