概述:
我有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}
/>
答案 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 上拼接值。