React Selector: передача события onChange обратно через два компонента - PullRequest
Новая
       7

React Selector: передача события onChange обратно через два компонента

0 голосов
/ 01 февраля 2020

Я пытаюсь передать событие onChange из селектора React через два компонента обратно в родительское приложение. Используя то, что ниже, 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>
    );

1 Ответ

1 голос
/ 01 февраля 2020

Попробуйте передать событие в качестве параметра this.props.selectCity следующим образом: onChange={(e)=>this.props.selectCity(e)} также проверьте ваши this.props.cityFilterOptions, которые могут не возвращать правильный результат.

...