Блог

Я хочу заполнить 2-й выпадающий список на основе выбора из 1-го выпадающего списка в React.Js . Мой код приведен ниже. Когда я выбираю опцию, я получаю эту ошибку: «Не удается прочитать свойство ‘target’ с нулевым значением», кстати, я использую выбор Ant-design. Когда я использую обычную опцию выбора, она работает без ошибок. Почему возникает эта ошибка?

    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>
   )
 

Не используйте e.target.value вы можете получить доступ к значению непосредственно в antd select

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

Пример кода — https://codesandbox.io/s/basic-usage-antd485-forked-5q451