反应 ref.example.value 与 e.target.value答案

【问题标题】：react ref.example.value vs. e.target.value反应 ref.example.value 与 e.target.value
【发布时间】：2017-03-11 03:24:45
【问题描述】：

我有下面的组件可以很好地与this.refs.searchString.value 配合使用，但如果我只使用event.target.value，它会起作用吗？如果是这样，哪一种是首选方法？各有什么优缺点？

const SearchBar = React.createClass({

  handleSubmit (event) {
    event.preventDefault()
    const formattedSearchString = this.refs.searchString.value.replace(/[^a-z]/gi, "").toLowerCase()
    this.refs.searchString.value = ''
    this.props.submitSearch(formattedSearchString)
  },
  render() {
    return (
      <form className="form form-group has-info col-md-4 text-align-center" onSubmit={this.handleSubmit}>
        <input className="search-input form-control" type="text" ref="searchString"  placeholder=" . . . enter pokemon name" />
        <button className="btn btn-info btn-raised" type="submit" name="button">Search!</button>
      </form>
    )
  }
})

【问题讨论】：

event.target.value 是首选。不要过度使用 Refs。 facebook.github.io/react/docs/…

标签： javascript events reactjs target ref

【解决方案1】：

如文档中所述，we shouldn't overuse refs，首选方法是使用 event.target.value 和 Controlled Components。

const SearchBar = React.createClass({
  getInitialState(){
     return {textValue: ""};
  },
  onTextChange(evt) {
     this.setState({textValue: evt.target.value});
  },
  handleSubmit (event) {
    event.preventDefault()
    const formattedSearchString = this.state.textValue.replace(/[^a-z]/gi, "").toLowerCase()
    this.refs.searchString.value = ''
    this.props.submitSearch(formattedSearchString)
  },
  render() {
    return (
      <form className="form form-group has-info col-md-4 text-align-center" onSubmit={this.handleSubmit}>
        <input className="search-input form-control" type="text" value={this.state.textValue} onChange={this.onTextChange}  placeholder=" . . . enter pokemon name" />
        <button className="btn btn-info btn-raised" type="submit" name="button">Search!</button>
      </form>
    )
  }
})

【讨论】：

如果您已经为其他目的创建了 ref 怎么办？引入 event.target 并同时使用两者是否仍然有意义？

【解决方案2】：

如果您使用event.target.value，则必须使用useState 跟踪表单输入的状态。每次状态变化，也就是每次击键后，都会重新渲染应用程序，这是非常昂贵的操作。

使用useRef 将保留状态而不重新渲染。

【讨论】：