如何解决在React中提交表单后,如何强制“选择”返回“选择...”?
提交表格后,如何强制“选择”返回“选择...”?
<select name="activated" className="form-control" as="select" onChange={handleInputChange}>
<option value={values.activated} selected>Choose...</option>
<option value="Activated">Activated</option>
<option value="Deactivated">Deactivated</option>
</select>
我认为我必须使用模糊或聚焦方法。有想法吗?
解决方法
import Select from 'react-select';
export class Test extends Component {
this.setState = {
selection: 0,};
onSelectChange = (e) => {
this.setState({ selection: e.value });
}
onSubmit = (e) => {
e.preventDefault();
const { selection } = this.state;
// Post request logic comes here
// Reset Select component to original default state
this.setState({selection: 0});
}
render() {
const options = [
{ label: 'Choose something',value: 0 },{ label: 'Item 1',value: 1 },{ label: 'Item 2',value: 2 },];
return (
<form onSubmit={this.onSubmit}>
<Select
options={options}
value={this.state.selection}
onChange={this.onSelectChange}
/>
//submit button here
</form>
);
使用值prop代替defaultValue并通过状态进行管理。在提交时,将该状态重置为初始值,即0。
,非常感谢,但是我找到了一个简单的解决方案。在我的handleSubmit函数上添加以下内容:document.getElementById(“ myId”)。selectedIndex = 0
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。