javascript - React Selector：通过两个组件传回 onChange 事件

Question

我正在尝试通过两个组件将来自 React 选择器的 onChange 事件传递回父应用程序。使用下面的内容，e.target.value 是未定义的，因此事件似乎没有回来。什么是不正确的？

父应用程序，通过一直向下传递 selectCity，我假设事件 e 应该回到它。

  selectCity = e => {
     console.log('filter city' + e.target.value)
     this.setState({
        filteredBuildings: this.state.filteredBuildings.filter((b) =>
        b.filterOptions.city === e.target.value)
     })
   }

   <FilterSection
      cityFilterOptions={this.getCityFilterOptions()}
      selectCity={this.selectCity}
   />

中间组件，FilterSection，只需传递selectCity：

const FilterSection = props =>
    <div className="filter-section">
       <Filter
           cityFilterOptions={props.cityFilterOptions}
           selectCity={props.selectCity}
       />    
     </div>

子组件，试图将selectCity函数设置为 onChange 事件。

        return (
        <div className="filter-row">
            <div className="filter">
                <Select
                    onChange={this.props.selectCity}
                    className="basic-single"
                    classNamePrefix="select"
                    isClearable={true}
                    isSearchable={true}
                    name="color"
                    options={this.props.cityFilterOptions}
                    placeholder="All Cities"
                />
            </div>
        </div>
    );

标签： javascriptreactjsonchange

Answer 1

尝试像这样将事件作为参数传递给 this.props.selectCity：onChange={(e)=>this.props.selectCity(e)}还要检查您的 this.props.cityFilterOptions 可能没有返回正确的结果。