ReactJS-更改下拉列表时重置下拉列表

时间:2018-07-23 12:10:45

标签: reactjs office-fabric

概述:

我有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}
 />

1 个答案:

答案 0 :(得分:0)

如果要实现 dom 更改而无需调用 render()函数。

MobX提供api来处理状态更改,而无需调用 setState()

其中每个变量都是一个可观察,可以触发值更改,例如使用 2wayDataBinding Angular 中。

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 上拼接值。