Javascript 什么'；在React Redux中访问输入字段的正确方法是什么？

所以我有一个应用程序，它使用Redux来存储一些数据。然后我有了搜索组件，我最初希望它是一个简单的哑组件。但是，有一个输入字段，我希望访问并传递它的值，以便对其进行处理。但是，我不知道如何管理这个输入字段的值，即如何访问它&在哪里存储值。我想使用Redux并保持一致性，所以这是我的主要问题。我已经找到了下面的解决方案（这是可行的），但在我看来这不再像Redux了？我是否违反了Redux的特定规则

另一方面，如何使用Redux？仅针对一个组件中的一个输入字段使用减速机和动作等？这似乎有点太多了，但请启发我

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

类搜索扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
用户名：“
};
this.handleUsernameChange=this.handleUsernameChange.bind（this）；
}
HandleUserName更改（evt）{
console.log（“Helo”+evt.target.value）；
这是我的国家({
用户名：evt.target.value
});
}
提交（e）{
e、 预防默认值（）；
console.log（“Hello”+e）；
/*做点什么*/
}
render（）{
//通过render（）返回JSX
返回(
Youtube链接
下载
);
}
}
//导出搜索
导出默认搜索

另一方面，如何使用Redux？仅针对一个组件中的一个输入字段使用减速机和动作等？这似乎有点太多了，但请启发我

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

是的，这就是使用Redux的方式。如果您需要应用程序中任何其他位置的

用户名

值，那么这就是您应该采取的方法

如果您不想编写自己的操作和reducer以及它的所有内容，您可以研究如何为您处理它，但如果不需要用户提供太多其他输入，则可能有点过头了

如果只在按下按钮下方的按钮时才需要它，那么您所拥有的就可以了，因为您可以使用组件状态中的值来提升您的操作，例如

onSubmit(e) {
    e.preventDefault();
    console.log("Hello" + e);
    /* Do something... */
    this.props.downloadTheThing(this.state.username)
}

其中，连接组件时，

下载内容

映射到mapDispatchToProps函数中（假设您使用的是react-redux）。

“我想使用redux并保持一致，因此这是我的主要问题。”

---

这是在这个用例中使用Redux的一个合理理由。但在应用程序中结合使用Redux和本地组件状态也是很好的。我认为这是一个完美的例子，说明局部组件状态是一个好的解决方案。我写了一篇关于这个话题的博客文章。如果您愿意，您可以在这里查看：

在Redux中使用本地状态肯定是不错的

从共享的代码片段中，您甚至不需要使用本地状态

constructor(props) {
  ...
  this.username = '';
  ...
}

onSubmit() {
  console.log('Hello ' + this.username);
}

render() {
  return (
    ...
    <input type="text" onChange={e => this.username = e.target.value} />
    ...
  );
}

构造函数（道具）{
...
this.username=''；
...
}
onSubmit（）{
log（'Hello'+this.username）；
}
render（）{
返回(
...
this.username=e.target.value}/>
...
);
}

这段代码是您的组件与redux商店通信的一种配置

现在让我们关注输入字段。我们必须设置值：

    <input
      type="text"
      value={this.props.reduxState.input}// i assume you have `input:""` in the state. u can name anything you want.
      onChange={e => {
        this.props.dispatch(setInputAction(e.target.value));//we are sending e.target.value to the reducer via dispatch().
      }}
    />

{
this.props.dispatch（setInputAction（e.target.value））；//我们正在通过dispatch（）将e.target.value发送到reducer。
}}
/>

---

setInputAction只是一个发送到reducer的对象。减速器已经定义了在某些动作下要做什么。因此，您只需发送消息，reducer就会相应地更改状态

对于可以在不同上下文中使用的较小组件，最好将这些内容保存在组件的状态中，而不是保存在redux存储中。如果你还想把它保存在redux商店，你可以创建一个动作来帮你。谢谢。这会使我的组件“智能”吗？或者说它是一个“愚蠢”的组成部分还是公平的？这就是为什么“聪明”和“愚蠢”的绰号是愚蠢的。从我通读的一篇教程中，我喜欢作者关于“连接”和“纯粹”的概念。Pure仅用于演示，“已连接”连接到商店。如果您使用状态来管理表单，但不保存到存储，我认为该组件仍然是纯/哑的。

    <input
      type="text"
      value={this.props.reduxState.input}// i assume you have `input:""` in the state. u can name anything you want.
      onChange={e => {
        this.props.dispatch(setInputAction(e.target.value));//we are sending e.target.value to the reducer via dispatch().
      }}
    />