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

Question

我有以下问题。

我有一个react组件，可以在列表上进行过滤器搜索，但是如果我将一个value属性添加到可以在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>

Answer 1

将值设置为空为

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

是的，onClick需要函数或值而不是字符串。 不推荐使用React.findDOMNode() 。 您应该使用ReactDOM.findDOMNode();

 class Hello extends React.Component { handleChange = (e) => { } handleClick = () => { ReactDOM.findDOMNode(this.refs.form).value = ""; } render() { return ( <div> <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={this.handleClick}><i className="uk-icon-undo"></i>click</button> </div> ) } } ReactDOM.render(<Hello />, document.getElementById('app')); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.js"></script> <div id="app"></div> 

使用状态并为输入值更改状态也是一个更好的主意。

如

 class Hello extends React.Component { constructor() { super() this.state = { valueAttr : '' } } handleChange = (e) => { this.setState({valueAttr: e.target.value}); } handleClick = () => { this.setState({valueAttr: ''}) } render() { return ( <div> <input type="text" ref="form" placeholder="Search indicators" className="uk-width-1-1" value = {this.state.valueAttr} onChange={this.handleChange} /> <button className="uk-button uk-width-1-1" onClick={this.handleClick}><i className="uk-icon-undo"></i>click</button> </div> ) } } ReactDOM.render(<Hello />, document.getElementById('app')); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.js"></script> <div id="app"></div> 

我个人更喜欢第二种方法。 但是您可以以任何舒适的方式进行操作。

Answer 2

在这里， onClick="React.findDOMNode(this.refs.form).reset()"将字符串分配给按钮的onClick值，而不是函数，如果要分配一个函数，它应该看起来像onClick={React.findDOMNode(this.refs.form).reset}"或onClick={() => React.findDOMNode(this.refs.form).reset()}

接下来，如果我findDOMNode话，在React中不推荐使用findDOMNode，因此您应该使用ReactDOM。

最后，我怀疑是否存在reset方法，因此我认为您应该尝试直接更改输入值。

尝试这个

onClick={() => this.refs.form.value = ''}

Answer 3

只需使用：

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

应该做的把戏