下拉过滤器 - 为什么 e.target.value 在更改时未定义?

Question

我不确定为什么e.target.value的值未定义。

type State = {
filterCountry: string,
};
export default class Developers extends Component {
constructor(props) {
super(props);
this.state = {
developers: [],
};
}
componentDidMount() {
fetch('API').then(features => {
return features.json();
}).then(data => {
let developers = data.features.map((info) => {
const developer_info = {
id: info.id,
name: info.properties.name,
skills: info.properties.skills_full,
location: info.properties.location,
description: info.properties.description,
email: info.properties.email,
country: info.properties.continent
}
return developer_info;
});
this.setState({ developers: developers})
})
}
filter(e) {
this.setState({filter: e.target.value})
}
filterCountry(e){
this.setState({filterCountry: e.target.value})
}


render() {
if(this.state.filterCountry){
developers = developers.filter( developer =>
developer.country
.includes(this.state.filterCountry))
}

return (

<ControlSelect
id="country-select"
onChange={this.filterCountry.bind(this)} value={this.state.filterCountry}
options={options_dd2}
/>
</div>

尝试遵循此示例 在 React 中创建一个下拉列表以显示/隐藏基于对象类的提取数据

Answer 1

看起来问题出在ControlSelect它没有设置e.target.value属性。

我相信如果您只使用带有选项的选择元素将起作用

return (
<div>
<select onChange={this.filterCountry.bind(this)} value={this.state.filterCountry}>
<option value="value">All Champs</option>
<option value="Assassin">Assassin</option>
<option value="Fighter">Fighter</option>
<option value="Mage">Mage</option>
<option value="Marksman">Marksman</option>
<option value="Support">Support</option>
<option value="Tank">Tank</option>
</select>
</div>
)