时间戳

首页 > 解决方案 > Reactjs-当一个下拉菜单改变时重置下拉菜单

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

问题描述

概述：

我有 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 实现此功能，但是是否可以通过反应而不在这些 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}
 />

标签： reactjsoffice-fabric

解决方案

如果你想在不调用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上的值。

推荐阅读