时间戳

首页 > 解决方案 > React TypeError：无法读取 null 的属性“目标”

reactjs - React TypeError：无法读取 null 的属性“目标”

问题描述

我想根据 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>
   )

标签： reactjsantd

解决方案

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

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

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

推荐阅读