#reactjs #antd
#reactjs #antd
Вопрос:
Я хочу заполнить 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>
)
Комментарии:
1. Что вы получили, когда вы
console.log(e)
?2. Null, но когда я заменяю <Select> на <select> , он работает правильно. Но я хочу использовать выбор Ant-Design
Ответ №1:
Не используйте e.target.value
вы можете получить доступ к значению непосредственно в antd
select
function handleChange(value) {
console.log(`selected ${value}`);
}
Пример кода — https://codesandbox.io/s/basic-usage-antd485-forked-5q451