反应：将选定的选项保存到状态答案

【问题标题】：React: saving selected options into state反应：将选定的选项保存到状态
【发布时间】：2019-08-27 14:54:21
【问题描述】：

我正在尝试将我的选择框的选定选项保存在状态中。在我的框中选择某些内容时出现错误...看起来“事件”未定义，我看不出为什么会出现这种情况。

import React, { Component } from 'react'
import Select from 'react-select'

class SwitchList extends React.Component{
  constructor(){ 
    super()
    this.state = {
      switches: [],
      selectedOption: []
    }
  }
  handleChange(event){
    this.setState({selectedOption: event.target.value })
  }
  render() {
    return(
      <Select
        value={this.state.selectedOption}
        options={this.state.switches}
        onChange={this.handleChange}
      />
    )
  }
}
> Uncaught TypeError: Cannot read property 'value' of undefined

【问题讨论】：

澄清一下你的意思是通过“安全”来“保存”吗？
实际上似乎是未定义的目标，而不是事件。
input's event.target is null within this.setState [React.js]的可能重复
嗨，巴斯蒂安，检查我的解决方案，如果有帮助，请告诉我。

标签： reactjs react-select

【解决方案1】：

这是因为react-select 库中onChange 回调的第一个参数不是React 的SyntheticEvent 的实例。第一个参数 - 是一个被选中的选项。此外，您需要将handleChange 函数绑定到this 或使用箭头函数。这是一个正确的代码：

constructor(){ 
    super()
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      switches: [],
      selectedOption: []
    }
  }

...
  handleChange(option){
    this.setState({selectedOption: option.value })
  }
...

还有一个建议。如果您对参数或变量的类型或值没有信心，请使用console.log 或浏览器调试工具。

【讨论】：

【解决方案2】：

这里有 2 个问题。

首先，您需要将this 绑定到您的handleChange 函数。为此，您可以使用箭头功能，

handleChange = (value) => {
   console.log(value)
   this.setState({selectedOption: value })
}

其次，react-select 直接给你{value: "", label: ""} 格式的选项，你可以直接在状态中设置。

Demo

【讨论】：