Question

我正在尝试将选择框的选定选项保存为状态。在框中选择某项时出现错误...好像未定义“事件”，我看不出出现这种情况的原因。

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

Answer 1

发生这种情况是因为onChange库中react-select回调的第一个参数不是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或浏览器调试工具。

Answer 2

这里有2期。

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

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

第二，react-select在更改时直接为您提供格式为{value: "", label: ""}的选项，您可以直接将其设置为状态。

Demo

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

2 个答案: