Javascript 使用reactjs重置或清除输入字段

我有以下问题

我有一个react组件，它可以在列表上进行筛选搜索，但我想用一个按钮清除输入字段，如果我向输入字段添加一个值属性，我可以在setState中设置该属性，但它会停止onChange，因为它在列表上进行筛选搜索：

我已经创建了以下内容，但仍然不起作用

<input type="text" ref="form" placeholder="Search indicators" className="uk-width-1-1" onChange={this.handleChange} />

<button className="uk-button uk-width-1-1" onClick="React.findDOMNode(this.refs.form).reset()"><i className="uk-icon-undo"></i></button>

此处

onClick=“React.findDOMNode（this.refs.form）.reset（）”

您将字符串分配给按钮的onClick值，而不是函数，如果要分配函数，它应该看起来像

onClick={React.findDOMNode（this.refs.form）.reset}“

或

onClick={（）=>React.findDOMNode（this.refs.form）.reset（）

接下来，如果我没记错的话，

findDOMNode

在React中是不推荐的，所以您应该使用ReactDOM来实现这一点

最后，我怀疑存在

reset

方法，所以我认为您应该尝试直接改变输入值

试试这个

---

onClick={（）=>this.refs.form.value=''''}

将值设置为空，如下所示：

handleClick = () => {
        ReactDOM.findDOMNode(this.refs.form).value = "";
      }

是的，onClick需要一个函数或值，而不是字符串。另外，

React.findDOMNode（）

不推荐使用。您应该使用

ReactDOM.findDOMNode（）；

类Hello扩展了React.Component{
handleChange=（e）=>{
}
handleClick=（）=>{
ReactDOM.findDOMNode（this.refs.form）.value=“”；
}
render（）{
返回(
点击
)
}
}
ReactDOM.render（，document.getElementById（'app'）；

只需使用：

this.refs.form.getInputNode().value = '';

---

应该做这个把戏

如何在功能性component@yaswanthkoneri，对于功能组件，也可以在挂钩的帮助下使用状态和参照