React TypeError：无法读取 null 的属性“目标”答案

【问题标题】：React TypeError: Cannot read property 'target' of nullReact TypeError：无法读取 null 的属性“目标”
【发布时间】：2020-11-26 06:34:43
【问题描述】：

我想根据 React.Js 中第一个下拉列表的选择来填充第二个下拉列表。我的代码如下。当我选择选项时，我收到此错误：“无法读取 null 的属性‘目标’” 顺便说一句，我正在使用 Ant-design 的 Select。当我使用普通选择选项时，它可以正常工作。为什么会出现这个错误？

   state={
    periodTypes: [
        { name: 'MONTH', period: ['period1-1', 'period1-2', 'period1-3'] },
        { name: 'QUARTER', period: ['1', '2', '3', '4'] },
        { name: 'HALF_YEAR', period: ['1', '2'] },
        { name: 'YEAR', period: ['2019', '2020'] }
    ],
    selectedPeriodType: 'YEAR'
   }
handleChange = (e) => {
    console.log(e)
    this.setState({ selectedPeriodType: e.target.value })
};
render() {
    let periodtype = this.state.periodTypes.filter(periodtype => {
        return periodtype.name === this.state.selectedPeriodType
    })
    return (

 <div className="w-24 mr-md-3 mb-4">
  <Select className=" height-53  w-100" name="" id="" placeholder="Dövrün tipi"  value= 
  {this.state.selectedPeriodType} onChange={this.handleChange.bind(this)}> {                                        
  this.state.periodTypes.map((periodtype, i) => {
   return <Option>{periodtype.name}</Option>   }) }
  </Select>
 </div>

 <div className="w-24 mr-md-3 mb-4">
   <Select className=" height-53  w-100" name="" id="" placeholder="Dövr">
   {periodtype[0].period.map((period, i) => {
    return <Option>{period}</Option>
     })}
   </Select>
      </div>
   )

【问题讨论】：

console.log(e) 得到了什么？
Null，但是当我用时，它可以正常工作。但我想用 Ant-Design 的 Select

标签： reactjs antd

【解决方案1】：

不要使用e.target.value 可以直接在antd select 中访问值

function handleChange(value) {
  console.log(`selected ${value}`);
}

示例代码 - https://codesandbox.io/s/basic-usage-antd485-forked-5q451

【讨论】：