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

Question

我有以下问题。

我有一个 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>

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>

我个人更喜欢第二种方法。但您可以以任何您觉得舒服的方式进行。