Javascript 使用 Reactjs 清除输入字段？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38731271/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Clear an input field with Reactjs?
提问by Jason Chen
I am using a variable below.
我在下面使用一个变量。
var newInput = {
title: this.inputTitle.value,
entry: this.inputEntry.value
};
This is used by my input fields.
这是我的输入字段使用的。
<input type="text" id="inputname" className="form-control" ref={el => this.inputTitle = el} />
<textarea id="inputage" ref={el => this.inputEntry = el} className="form-control" />
<button className="btn btn-info" onClick={this.sendthru}>Add</button>
Once I activate {this.sendthru}I want to clear my input fields. However, I am uncertain how to do so.
激活后，{this.sendthru}我想清除输入字段。但是，我不确定如何做到这一点。
Also, as shown in this example, it was pointed out to me that I should use the refproperty for input values. What I am unclear of is what exactly does it mean to have {el => this.inputEntry = el}. What is the significance of elin this situation?
此外，如本例所示，有人向我指出我应该将ref属性用于输入值。我不清楚的是拥有{el => this.inputEntry = el}. el在这种情况下有什么意义？
采纳答案by D??ng Diesel
You can use input type="reset"
您可以使用 input type="reset"
<form action="/action_page.php">
text: <input type="text" name="email" /><br />
<input type="reset" defaultValue="Reset" />
</form>
回答by Galeel Bhasha
Let me assume that you have done the 'this' binding of 'sendThru' function.
让我假设您已经完成了“sendThru”函数的“this”绑定。
The below functions clears the input fields when the method is triggered.
以下函数在触发方法时清除输入字段。
sendThru() {
this.inputTitle.value = "";
this.inputEntry.value = "";
}
Refs can be written as inline function expression:
Refs 可以写成内联函数表达式：
ref={el => this.inputTitle = el}
where elrefers to the component.
whereel指的是组件。
When refs are written like above, React sees a different function object each time so on every update, ref will be called with null immediately before it's called with the component instance.
当 refs 像上面那样编写时，React 每次都会看到一个不同的函数对象，因此每次更新时，ref 将在使用组件实例调用之前立即使用 null 调用。
Read more about it here.
在此处阅读更多相关信息。
回答by Satheesh
Declare value attribute for input tag (i.e value= {this.state.name}) and if you want to clear this input vale you have to use this.setState({name : ''})
声明输入标签的值属性（即value= {this.state.name}），如果你想清除这个输入值，你必须使用this.setState({name : ''})
PFB working code for your reference :
PFB 工作代码供您参考：
<script type="text/babel">
var StateComponent = React.createClass({
resetName : function(event){
this.setState({
name : ''
});
},
render : function(){
return (
<div>
<input type="text" value= {this.state.name}/>
<button onClick={this.resetName}>Reset</button>
</div>
)
}
});
ReactDOM.render(<StateComponent/>, document.getElementById('app'));
</script>
回答by sean le roy
I'm not really sure of the syntax {el => this.inputEntry = el}, but when clearing an input field you assign a ref like you mentioned.
我不太确定语法 {el => this.inputEntry = el}，但是在清除输入字段时，您会像您提到的那样分配一个 ref。
<input type="text" ref="someName" />
Then in the onClick function after you've finished using the input value, just use...
然后在完成使用输入值后的 onClick 函数中，只需使用...
this.refs.someName.value = '';
Edit
编辑
Actually the {el => this.inputEntry = el} is the same as this I believe. Maybe someone can correct me. The value for el must be getting passed in from somewhere, to act as the reference.
实际上 {el => this.inputEntry = el} 与我相信的相同。也许有人可以纠正我。el 的值必须从某处传入，作为参考。
function (el) {
this.inputEntry = el;
}
回答by AveryFreeman
I have a similar solution to @Satheesh using React hooks:
我使用 React 钩子有一个与 @Satheesh 类似的解决方案：
State initialization:
状态初始化：
const [enteredText, setEnteredText] = useState('');
Input tag:
输入标签：
<input type="text value={enteredText} (event handler, classNames, etc.) />
Inside the event handler function, after updating the object with data from input form, call:
在事件处理函数内部，使用来自输入表单的数据更新对象后，调用：
setEnteredText('');
Note: This is described as 'two-way binding'
注意：这被描述为“双向绑定”
回答by Pete Fullen
The way I cleared my form input values was to add an id to my form tag. Then when I handleSubmit I call this.clearForm()
我清除表单输入值的方法是在表单标签中添加一个 id。然后当我处理提交时，我调用 this.clearForm()
In the clearForm function I then use document.getElementById("myForm").reset();
在 clearForm 函数中，我然后使用 document.getElementById("myForm").reset();
import React, {Component } from 'react';
import './App.css';
import Button from './components/Button';
import Input from './components/Input';
class App extends Component {
state = {
item: "",
list: []
}
componentDidMount() {
this.clearForm();
}
handleFormSubmit = event => {
this.clearForm()
event.preventDefault()
const item = this.state.item
this.setState ({
list: [...this.state.list, item],
})
}
handleInputChange = event => {
this.setState ({
item: event.target.value
})
}
clearForm = () => {
document.getElementById("myForm").reset();
this.setState({
item: ""
})
}
render() {
return (
<form id="myForm">
<Input
name="textinfo"
onChange={this.handleInputChange}
value={this.state.item}
/>
<Button
onClick={this.handleFormSubmit}
> </Button>
</form>
);
}
}
export default App;
