下拉过滤器 - 为什么 e.target.value 未定义 onChange？答案

【问题标题】：dropdown filter - Why is e.target.value undefined onChange?下拉过滤器 - 为什么 e.target.value 未定义 onChange？
【发布时间】：2018-05-06 23:20:39
【问题描述】：

我不确定为什么 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>

试图遵循这个例子 create a dropdown in react to show/hide fetch data based on object class

【问题讨论】：

什么是ControlSelect？它是否设置了e.target.value 属性？显示完整的e 内容。 PS：如果您发布正确缩进的代码也会有所帮助。
为什么值是this.state.filterCountry 并且不在状态构造函数中
我们可以忽略ControlSelect，它没有设置e.target.value属性
@liam 我不确定.. 我有点糊涂了，.. 不是 100% 确定一切
好吧，在你的构造器中创建一个像 filterCountry: 'value' 这样的 filterCountry 状态。

标签： javascript reactjs filter dropdown

【解决方案1】：

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

我相信如果你只使用带有选项的 Select 元素就可以了

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

【讨论】：

好吧..它很奇怪，bc这段代码..对开发人员做了一些事情..这使得它未定义..
这段代码不应该破坏开发者的状态，也许还有其他的东西。
我在那里发现了问题，.. 最后一件事，.. 在控制台中，它总是显示之前的选择而不是当前的选择，.. 第一次单击下拉菜单时，选择未定义。