Question

我遇到以下问题。

我有一个反应组件，它对列表进行过滤搜索很好，但我想用一个按钮清除输入字段，如果我在输入字段中添加一个值属性，我可以在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();

＆＃13;

  
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'));

＆＃13;

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

＆＃13;

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

作为

＆＃13;

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'));

＆＃13;

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

＆＃13;

我个人更喜欢第二种方法。但你可以用任何你觉得舒服的方式来做。

Answer 2

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

接下来，如果我没记错，在React中不推荐findDOMNode，所以你应该使用ReactDOM。

最后，我怀疑存在reset方法，所以我认为你应该尝试直接改变输入值。

试试这个

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

Answer 3

只需使用：

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

应该做的伎俩

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

3 个答案: