Javascript 反应参考示例值与目标值

下面的组件可以很好地处理

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

const SearchBar=React.createClass({
handleSubmit（事件）{
event.preventDefault（）
const formattedSearchString=this.refs.searchString.value.replace（/[^a-z]/gi，”）.toLowerCase（）
this.refs.searchString.value=''
this.props.submitSearch（格式化搜索字符串）
},
render（）{
返回(
搜索！
)
}
})

如文档中所述，首选方法是使用

event.target.value

使用

const SearchBar=React.createClass({
getInitialState（）{
返回{textValue:”“}；
},
onTextChange（evt）{
this.setState（{textValue:evt.target.value}）；
},
handleSubmit（事件）{
event.preventDefault（）
const formattedSearchString=this.state.textValue.replace（/[^a-z]/gi，”）.toLowerCase（）
this.refs.searchString.value=''
this.props.submitSearch（格式化搜索字符串）
},
render（）{
返回(
搜索！
)
}
})

如果使用

event.target.value

，则必须使用

useState

跟踪表单输入的状态。每次状态改变，这意味着每次击键后，它都会重新启动应用程序，这是一个非常昂贵的操作

---

使用

useRef

将保留状态而无需重新提交。

event.target.value

是首选。不要过度使用参考文献。如果已经为其他目的创建了ref，该怎么办？引入event.target并同时使用两者是否仍然有意义？

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