[英]emptying the input after submiting a form
I'm trying to empty the input tag once I'm updating my state: 更新状态后,我尝试清空输入标签:
state = {
formName: '',
inputs: [],
tempInput: {
inputLabel: '',
inputType: '',
inputValue: ''
}
};
this is my form: 这是我的表格:
<div className="formG">
<form className="form-maker" onSubmit={this.handleSubmit}>
Label:
<input name="inputLabel" type="text" onChange={this.handleChange} />
Type:
<input name="inputType" type="text" onChange={this.handleChange} />
Value
<input name="inputValue" type="text" onChange={this.handleChange} />
Form Name
<input name="formName" type="text" onChange={this.formName} />
<button>Submit</button>
</form>
that's how I handle the change 这就是我应对变化的方式
handleChange = e => {
const { name, value } = e.target;
this.setState(currentState => ({
tempInput: { ...currentState.tempInput, [name]: value }
}));
};
and I tried to just empty the tempInput but it doesn't work, anybody knows why? 我试图只清空tempInput,但是它不起作用,有人知道为什么吗?
handleSubmit = e => {
e.preventDefault();
const inputs = [...this.state.inputs, this.state.tempInput];
const { tempInput } = this.state;
tempInput.inputLabel = '';
tempInput.inputType = '';
tempInput.inputValue = '';
this.setState({ inputs, tempInput });
};
Your form is an uncontrolled component, so they are not controlled by the state fields. 您的表单是不受控制的组件,因此它们不受状态字段的控制。 That's why your approach didn't work.
这就是为什么您的方法不起作用的原因。 Instead you can do
e.target.reset()
which will clear the entire form. 相反,您可以执行
e.target.reset()
来清除整个表单。 But if you want to reset some input, you can access them and set the .value
to ""
as I had shown below. 但是,如果您想重置一些输入,可以访问它们并将
.value
设置为""
,如下所示。
An uncontrolled component works like form elements do outside of React.
不受控制的组件的工作方式就像表单元素在React之外一样。 When a user inputs data into a form field (an input box, dropdown, etc) the updated information is reflected without React needing to do anything.
当用户将数据输入到表单字段(输入框,下拉列表等)中时,更新的信息将得到反映,而React无需执行任何操作。 However, this also means that you can't force the field to have a certain value.
但是,这也意味着您不能强制该字段具有某个值。 From Doc
从文件
So your handleSubmit
method will look like: 因此,您的
handleSubmit
方法将如下所示:
handleSubmit = e => {
e.preventDefault();
const inputs = [...this.state.inputs, this.state.tempInput];
// ....
// The below will reset entire form.
// e.target.reset();
// If you want some of them to empty.
const { elements } = e.target
elements['inputLabel'].value = "";
elements['inputType'].value = "";
elements['inputValue'].value = "";
};
Check the doc of HTMLFormElement.elements
检查
HTMLFormElement.elements
的文档
Your input tags are not displaying the value of your state. 您的输入标签未显示状态值。 1) pull the individual values out of tempInput 2) use the value stored in your state that is then updated by your handleChange.
1)从tempInput中拉出各个值2)使用状态中存储的值,然后由handleChange更新。 3) In your handleSubmit function reset your individual values to and empty string.
3)在您的handleSubmit函数中,将各个值重置为空字符串。
your handleChange should look like: 您的handleChange应该看起来像:
handleChange = e => {
const { name, value } = e.target;
this.setState([name]: value);
};
your jsx should look like : 您的jsx应该看起来像:
<form className="form-maker" onSubmit={this.handleSubmit}>
Label:
<input name="inputLabel" value={this.state.inputLabel} type="text" onChange={this.handleChange} />
Type:
<input name="inputType" value={this.state.inputType} type="text" onChange={this.handleChange} />
Value
<input name="inputValue" value={this.state.inputType} type="text" onChange={this.handleChange} />
Form Name
<input name="formName" value={this.state.formName} type="text" onChange={this.formName} />
<button>Submit</button>
</form>
You're mutating the original state. 您正在改变原始状态。 You can copy and then only set the state.
您可以复制然后仅设置状态。 Just changing the following will work fine for you.
只需更改以下内容对您就可以了。
Replace this: 替换为:
const { tempInput } = this.state;
With this: 有了这个:
const { tempInput } = {...this.state}; // copy the state
Also, be sure to bind the state value in your input elements like this to make them controlled component: 另外,请确保将状态值绑定在您的输入元素中,以使其成为受控组件:
<input name="inputLabel" type="text"
onChange={this.handleChange}
value={this.state.tempInput.inputLabel || ''} />
And your handler should be: 您的处理程序应为:
handleChange = e => {
const { value } = e.target;
this.setState({value});
// now, value will correspond to the controlled component
};
Also take care react suggest to use controlled component as far as possible: 还注意反应建议尽量使用受控组件 :
In most cases, we recommend using controlled components to implement forms.
在大多数情况下,我们建议使用受控组件来实现表单。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.