我不能用 react-select hanbleChange

Question

我想使用 contact-select 更改它，但我一直收到错误消息。
当我 select 这个选项时，我可以看到这个错误。请帮助我。

error

这是选项

const options = [
 { value: 'descript', label: '주관식' },
 { value: 'choice', label: '객관식' },
 { value: 'combine', label: '다중식' }
];

这是 onChange 函数

onChangeTmpType = (e) => {
 this.setState({
   tmp_type: e.target.value
 })
}

这是 React-Select

<Select
  components={makeAnimated()}
  value={this.state.tmp_type}
  onChange={this.onChangeTmpType}
  options={options}
/>

Answer 1

如 documentation here 中指定的那样，onChange 函数如下所示：

function (
  One of <
  Object,
  Array<Object>,
  null,
  undefined
>,
  {
    action required One of <
      "select-option",
      "deselect-option",
      "remove-value",
      "pop-value",
      "set-value",
      "clear",
      "create-option"
    >
    }
  ) => undefined

而您声明的 e 常量实际上具有以下结构：

{
  label: ...,
  value: ...
}

所以这里没有 target 键，而是直接 e.value 如果你想要访问道具 value.

这里是 live example 和 console.log，这样您就可以看到发生了什么。

Answer 2

按如下方式替换您的 onChangeTmpType 函数。

onChangeTmpType = (e) => {
 this.setState({
   tmp_type: e.value
 })
}

（@Laura 之前提到的）这样做的原因是来自 react select 的 e 只包含值和标签 .

我不能用 react-select hanbleChange

I can't hanbleChange with react-select

reactjs

react-select