如果在反应中使用 useState 而不是 this.state，如何将状态传递给调度操作？

问题描述

我是 React 初学者，在使用 react-redux 和 useState 时在状态管理方面遇到困难。 在下面的代码中，我基本上遵循了一个教程，该教程将 this.state 传递给 createProject 函数中的调度操作 handleSubmit，如下所示。

class CreateProject extends Component {
  state = {
    title: '',content: ''
  }
  handleChange = (e) => {
    this.setState({
      [e.target.id]: e.target.value
    })
  }
  handleSubmit = (e) => {
    e.preventDefault();
    // console.log(this.state);
    this.props.createProject(this.state);
  }
  render() {
    return (
      <div className="container">
        <form className="white" onSubmit={this.handleSubmit}>
          <h5 className="grey-text text-darken-3">Create a New Project</h5>
          <div className="input-field">
            <input type="text" id='title' onChange={this.handleChange} />
            <label htmlFor="title">Project Title</label>
          </div>
          <div className="input-field">
            <textarea id="content" className="materialize-textarea" onChange={this.handleChange}></textarea>
            <label htmlFor="content">Project Content</label>
          </div>
          <div className="input-field">
            <button className="btn pink lighten-1">Create</button>
          </div>
        </form>
      </div>
    )
  }
}

const mapDispatchToProps = dispatch => {
  return {
    createProject: (project) => dispatch(createProject(project))
  }
}

export default connect(null,mapDispatchToProps)(CreateProject)

现在，我不再使用 Class 组件，而是使用功能组件并使用 useState 钩子。在 handleSubmit 函数中，我如何将状态传递给 this.props.createProject()，因为 this.props 在功能组件的情况下未定义，以及如何传递状态代替 this.state，是吗？存储状态或其他东西的 projectinfo，我很困惑。

TLDR; 我想从 this.props.createProject(this.state) 钩子的角度重写 useState 行。

下面是我写的代码：

const CreateProject = () => {

    const [title,setTitle] = useState('');
    const [content,setContent] = useState('');


    const handleSubmit = (e) => {
        e.preventDefault();

        const projectinfo = { title,content }

        this.props.createProject(projectinfo);

    }
    return(
        <div className="container">
            <form onSubmit={handleSubmit} className="white">
                <h5 className="grey-text text-darken-3">Create Task</h5>
                <div className="input-field">
                    <label htmlFor="title">Title</label>
                    <input type="text" value={title} id="title" onChange={(e) => setTitle(e.target.value)} />
                </div>
                <div className="input-field">
                    <label htmlFor="content">Content</label>
                    <textarea id="content" className="materialize-textarea" onChange={(e) => setContent(e.target.value)}></textarea>
                   
                </div>
                <button className="btn pink lighten-1 z-depth-0">Create</button>
            </form>
        </div>
    );

}

const mapDispatchToProps  = (dispatch) =>{
    return{
        createProject: (project) => dispatch(createProject(project)),};
}

export default connect(null,mapDispatchToProps)(CreateProject);

任何帮助或线索来理解这一点将不胜感激。谢谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）