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

时间:2018-05-06 23:20:39

标签: javascript reactjs filter dropdown

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

1 个答案:

答案 0 :(得分: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>
   )