gpt4 book ai didi

javascript - 如何重置 react 中的选择下拉值

转载 作者:行者123 更新时间:2023-12-02 23:08:14 25 4
gpt4 key购买 nike

我有一个 html 下拉选择控件,并且我已将第一个选项值添加为 Select。还有其他几个选项可以从下拉列表中进行选择。现在我想重置下拉值并将其设置回Select

如何在 React 中做到这一点?

这是我的代码

<select className="form-control" ref="Auditee" name="Auditee" onChange={this.handleChange.bind(this)}>
<option>Select</option>
{this.renderAuditee()}
</select>
<button type="button" className="btn btn-primary" onClick={this.handleClear}>Clear</button>



renderAuditee(){
let Auditeefiltered = this.state.review1data.map(element=> element.EEECPM).filter((value, index, self) => self.indexOf(value) === index)

return Auditeefiltered.map(element=>
<option>{element.toString().replace(/\[.*?\]/,'')}</option>
)
}


handleClear(e){
e.preventDefault();

this.setState({
filterData:[],
filter: false
});

我不知道应该如何重置选择下拉列表。任何帮助都会有帮助

最佳答案

您的选择应该是controlled .

您需要有一个用于选定值的状态变量。

state ={
selected:''
}

受控选择应该是,

<select className="form-control" value={this.state.selected} name="Auditee" onChange={this.handleChange.bind(this)}>
<option>Select</option>
{this.renderAuditee()}
</select>
handleChange = (e) => {
this.setState({selected:e.target.value})
}

最后清除选择,

handleClear = (e) => {
this.setState({selected:""})
}

Demo

关于javascript - 如何重置 react 中的选择下拉值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57491815/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com