javascript - 在 React-Redux 中访问输入字段的正确方法是什么？

Question

所以我有这个应用程序，它使用 Redux 来存储一些数据。然后我有搜索组件，我最初希望它是一个普通的愚蠢组件。但是，有一个输入字段，我想访问并传递该输入字段的值以对其执行某些操作。但是，我不确定如何管理此输入字段的值，即如何访问它以及在哪里存储该值。我想使用 Redux 并保持一致，所以这是我的主要问题。我找到了以下解决方案(有效)，但这对我来说不再像 Redux 了？我这样做是否违反了任何 Redux 特定规则？

另一方面，我该如何使用 Redux 来做到这一点？使用 reducer 和操作等。只是一个组件中的这个输入字段？这似乎有点太多了，但请赐教!

class Search extends React.Component{

  constructor(props) {
   super(props);
   this.state = {
     username: ""
   };

    this.handleUsernameChange = this.handleUsernameChange.bind(this);
 }
  handleUsernameChange(evt) {
      console.log("Helo" + evt.target.value);
      this.setState({
          username: evt.target.value
      });
  }
  onSubmit(e) {
      e.preventDefault();
      console.log("Hello" + e);
      /* Do something... */
  }


  render() {
    // Return JSX via render()
    return (
      <div className="">
        <h1>Youtube Link</h1>
        <input className="form-control" onChange={this.handleUsernameChange}></input>
        <button className="btn btn-large btn-positive" onClick={this.onSubmit}>Download</button>
      </div>
    );
  }

}

// Export Search
export default Search

Answer 1

“我想使用 Redux 并保持一致，所以这是我的主要问题。”

这是在此用例中使用 Redux 的充分理由。但在应用程序中结合使用 Redux 和本地组件状态也是可以的。我认为这是一个完美的例子，说明本地组件状态是一个很好的解决方案。我写了一篇关于这个主题的博客文章。如果需要的话可以看这里:http://blog.jakoblind.no/2017/02/08/is-using-a-mix-of-redux-state-and-react-local-component-state-ok/