Reactjs- сброс выпадающих при изменении одного выпадающего

Question

Обзор:

У меня есть 3 выпадающих, которые используются для фильтрации данных:

<MyDropdown label="Filter by name" options={this.array1}
              changeState={this.event1.bind(this)}/>
<MyDropdown label="Filter by name" options={this.array2}
              changeState={this.event2.bind(this)}/>
<MyDropdown label="Filter by name" options={this.array3}
              changeState={this.event3.bind(this)}/>

Мое требование - сбросить другой раскрывающийся список до первого индекса всякий раз, когда пользователь изменяет любое из раскрывающихся списков.

Я могу добиться этой функциональности с помощью JQuery, но возможно ли это через реакцию без вызова render() для этих обновлений?

ОБНОВИТЬ

Контроллер для MyDropdown (использует раскрывающийся список офисных структур)

 <Dropdown
    label={this.props.label}
    onChanged={this.props.changeState}
    options={this.props.options}
    defaultSelectedKey={this.props.options.length > 0 ? this.props.options[0].key : undefined}
 />

Answer 1

Если вы хотите добиться изменений в dom без вызова функции render().

MobX предоставляет API для обработки изменений состояния без вызова setState ()

где каждая переменная будет наблюдаемой, которая может вызывать изменения значений, как в Angular с 2wayDataBinding.

https://mobx.js.org/intro/overview.html

Вы можете использовать следующий модуль npm.

https://www.npmjs.com/package/react-select

который имеет все API, которые вам нужны, например, в вашем случае, вам нужно изменить значение опций после выбора опции.

         <Async
            id="state-select"
            onBlurResetsInput={false}
            onSelectResetsInput={false}
            className="team-creation-dropdown-input"
            simpleValue
            clearable={false}
            rtl={false}
            searchable
            disabled={false}
            noResultsText="No results found"
            placeholder="Last Name"
            name="selected-state"
            labelKey="last_name"
            options={this.state.salesExecutives}
            value={teamMemberDetail.id}
            onChange={e => this.addNewTeamMember(e)}
            loadOptions={(input, callback) => { this.getOptions(input, callback, 'salesExecutives'); }}
            onInputChange={searchValue => { this.salesExecutivesSearch(searchValue, 'last_name'); }}
          />

Используя это, вы можете просто соединить значение с onInputChange или onChange.