Javascript 用Reactjs清除输入字段？

我正在使用下面的变量

var newInput = {
   title: this.inputTitle.value,
   entry: this.inputEntry.value    
};

这是由我的输入字段使用的

<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>

this.inputtle=el}/>
this.inpuntery=el}className=“表单控制”/>
添加

激活

{this.sendthru}

后，我想清除输入字段。然而，我不确定如何做到这一点

---

此外，如本例所示，有人向我指出，我应该使用

ref

属性作为输入值。我不清楚的是，拥有

{el=>this.inpuntery=el}

到底意味着什么。在这种情况下，

el

的意义是什么

我不太确定语法{el=>this.inpuntery=el}，但是在清除输入字段时，您会像前面提到的那样分配一个ref

<input type="text" ref="someName" />

编辑

实际上，{el=>this.inpuntery=el}与我认为的相同。也许有人能纠正我。el的值必须从某处传入，才能用作引用

function (el) {
    this.inputEntry = el;
}

---

假设您已经完成了“sendThru”函数的“this”绑定

触发方法时，以下函数将清除输入字段

sendThru() {
    this.inputTitle.value = "";
    this.inputEntry.value = "";
}

REF可以写为内联函数表达式：

ref={el => this.inputTitle = el}

其中，

el

指部件

当像上面那样编写ref时，React每次都会看到一个不同的函数对象，因此在每次更新时，ref将在使用组件实例调用之前立即使用null调用

---

阅读更多信息。

为输入标记（即

value={this.state.name}

）声明值属性，如果要清除此输入值，必须使用

this.setState（{name:'}）

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>

var StateComponent=React.createClass({
resetName:函数（事件）{
这是我的国家({
名称：“”
});
},
render:function（）{
返回(
重置
)
}
});
ReactDOM.render（，document.getElementById（'app'））；

清除表单输入值的方法是在表单标记中添加一个id。 然后当我处理submit时，我称之为.clearForm（）

然后在clearForm函数中使用document.getElementById（“myForm”）.reset（）

import React，{Component}来自'React'；
导入“/App.css”；
从“./components/Button”导入按钮；
从“./components/Input”导入输入；
类应用程序扩展组件{
状态={
项目：“，
名单：[]
}
componentDidMount（）{
这个.clearForm（）；
}
handleFormSubmit=事件=>{
this.clearForm（）
event.preventDefault（）
const item=this.state.item
这是我的国家({
列表：[…this.state.list，item]，
})
}
handleInputChange=事件=>{
这是我的国家({
项目：event.target.value
})
}
clearForm=（）=>{
document.getElementById（“myForm”）.reset（）；
这是我的国家({
项目：“
})
}
render（）{
返回(
);
}
}
导出默认应用程序；

您可以使用输入类型=“重置”

文本：

我有一个类似于@Satheesh的解决方案，使用React钩子：

状态初始化：

const [enteredText, setEnteredText] = useState(''); 

输入标签：

<input type="text" value={enteredText}  (event handler, classNames, etc.) />

---

注意：在onClick事件中，这被描述为“双向绑定”

this.state={
  title:''
}

sendthru=()=>{
  document.getElementByid('inputname').value = '';
  this.setState({
     title:''
})
}

this.inputtle=el}/>
添加

同样在React v 16.8+之后，您也可以使用挂钩

import React，{useState}来自“React”；
常量可控输入=（）=>{
const[firstName，setFirstName]=useState（false）；
常量handleSubmit=（e）=>{
e、 预防默认值（）；
如果（名字）{
log（'firstName:>>'，firstName）；
}
};
返回(
姓名：
setFirstName（e.target.value）}
/>
添加人
);
};

您可以使用useState：

import React, { useState } from 'react';
const [inputTitle, setInputTitle] = useState('');

然后为输入组件添加值：

render() {
<input type="text" onChange={(e) => setInputTitle(e.target.value)} 
value={inputTitle} />
<button onClick={handleSubmit} type="submit">Submit</button>
}

---

你能不能对sendthru函数的“this”绑定进行一点扩展？按原样，当我单击时，我得到一个错误

无法读取未定义的属性值
得到它。我没有使用
this.refs.inputTitle.value=”“
而是使用了
this.inputTitle=“”
，它实现了这个技巧。“sendThru”是onClick函数的事件处理程序，React建议在构造函数方法中绑定“this”引用。示例
constructor（）{this.sendThru=this.sendThru.bind（this）}'或者如果您没有将ES6类用于react组件，您可以在呈现方法中绑定this关键字，因为
onClick={this.sendThru.bind（this）}`应该是
this.inputtille.value=”“。React不推荐使用
this.refs
：来自angular:这似乎是一种双向绑定方法，我很喜欢。只有在输入中有按键时添加逻辑更新
this.state.name
，这才有效。否则它将被冻结为
'
，即
'this.state.name
.Jhee whizz的初始值，这是唯一对我有效的解决方案。谢谢。为什么不使用
ref
而不是id+document.getElementById？我不认为这是对公认答案的改进，因为裁判系统是在16.3回答三周后引入的，所以他可能不知道更好的方法。但我同意这需要更新。好，新观点！更好地表达我的答案。非常完整。
setEnteredText('');

this.state={
  title:''
}

sendthru=()=>{
  document.getElementByid('inputname').value = '';
  this.setState({
     title:''
})
}

<input type="text" id="inputname" className="form-control" ref={el => this.inputTitle = el} />   
<button className="btn btn-info" onClick={this.sendthru}>Add</button>

import React, { useState } from 'react';
const [inputTitle, setInputTitle] = useState('');

render() {
<input type="text" onChange={(e) => setInputTitle(e.target.value)} 
value={inputTitle} />
<button onClick={handleSubmit} type="submit">Submit</button>
}

setInputTitle('');
 document.querySelector('input').defaultValue = '';