Question

所以我有这个应用程序使用Redux来存储一些数据。然后我有了搜索组件，我原本想成为一个普通的哑组件。但是，有一个输入字段，其值我想访问并传递给它做一些事情。但是，我不知道如何管理此输入字段的值，即如何访问它和＆amp;存储值的位置。我想使用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

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/

Answer 2

另一方面，我如何使用Redux？带减速机和减速机动作等仅适用于一个组件中的这一个输入字段？这看起来有点太多了，但请赐教！

是的，这就是你使用Redux的方法。如果您在应用中的任何其他位置都需要username值，那么这就是您应该采取的方法。

如果您不想编写自己的动作和减速器以及它的所有内容，您可以查看redux-form为您处理它，但如果没有太多其他输入可能有点矫枉过正用户要求。

如果你只需要点击它下面的那个按钮就可以了，那么你所拥有的就好了，因为你可以用组件状态的值来提升你的动作，例如，

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

其中downloadTheThing在连接组件时映射到mapDispatchToProps函数中（假设您使用的是react-redux）。

Answer 3

在Redux中使用本地状态绝对没问题。

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

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

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

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

Answer 4

<input className="form-control" onChange={this.handleUsernameChange}></input>

这是您的输入字段。在react中处理输入时，要做的第一件事是设置value，然后应用onChange。使用value，我们会将输入的状态分配给组件的状态，这样我们将获得单一的事实来源。

由于您要在Redux存储上工作，因此我假设您已经在应用程序中设置了Redux存储，reduce和操作。减速器保持状态，然后您通过dispatch()向减速器发送消息。定义connect（）（）后，即可访问this.props.dispatch()上的dispatch（）。默认情况下，连接的组件会接收props.dispatch（）

import React from "react"; //anywhere you are using jsx, u should import this
import { connect } from "react-redux";
import setInputAction from "relative path" //actions are the messages that you send to reducers. reducers change the state based on the actions.

//this allows you access to state in Redux-store via the props.
const mapStateToProps = state => {
  return {
    reduxState: state
  };
};

export default connect(mapStateToProps)(Search);

此代码是您的组件的一种配置，用于与redux-store通信。

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

    <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().
      }}
    />

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

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

4 个答案: