Reactjs-当一个下拉菜单改变时重置下拉菜单答案

【问题标题】：Reactjs- resetting drop downs when one drop down is changedReactjs-当一个下拉菜单改变时重置下拉菜单
【发布时间】：2018-07-23 21:08:47
【问题描述】：

概述：

我有 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 来实现这个功能，但是是否可以通过 react 而不在这些 udate 上调用 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}
 />

【问题讨论】：

你能显示MyDropdown的代码吗？答案很大程度上取决于您的组件是受控还是不受控。
@Chris 我已经更新了帖子。
MyDropdown 是自定义组件？
应该只用反应来完成吗？或者你可以使用普通的javascript
@ShubhamAgarwalBhewanewala no.. 它的 Office 结构下拉列表

标签： reactjs office-fabric

【解决方案1】：

如果你想在不调用render()函数的情况下实现dom的变化。

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 上的值。

【讨论】：