将表单输入值传递给另一个组件 React

Question

目前在 React 中练习 state 和 props，我有一个相当大的组件，我试图将其拆分为几个较小的组件，但是我不确定如何将数据从一个组件传递到另一个组件。

该组件当前包含一个具有多个输入的表单，并在提交时呈现它们。据我了解，最好的方法是将表单放在它自己的组件中，然后使用道具传递父组件的状态。但是如何通过多个输入来完成，并确保 handleChange 和 handleSubmit 方法有效。

作为 React 的新手，我仍然对如何在一个组件中定义并在另一个组件中调用像 onChange 这样的方法感到困惑。

这是我到目前为止所得到的（一个重要的组成部分......）：

export default class App extends Component {
    constructor(props){
      super(props);
      this.state = {
        post: {
          name: "",
          description: "",
          level: "Junior",
          salary: 30000
        },
        jobs: []
      };
    }

  handleChange = e => {
    const { name, value } = e.target;

    this.setState(prevState => ({
      post: { ...prevState.post, [name]: value }
    }));
  };

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

    this.setState(prevState => ({
      jobs: [...prevState.jobs, prevState.post],
      post: { name: "", description: "", level: "", salary: 30000 }
    }));
  };

  render() {
    return (
      <div className="App">
        <nav>
          <button className="btn btn-primary">Post it!</button>
        </nav>


         * This is the section i've been trying to put in a separate component... *


        <div className="form-container">
          <form>
            <div className="form-group">
              <input
                className="col-12 form-control"
                name="name"
                onChange={this.handleChange}
                type="text"
                value={this.state.post.name}
                placeholder="post name"
              />
            </div>
            <div className="form-group">
              <textarea
                className="col-12 form-control"
                name="description"
                onChange={this.handleChange}
                type="text"
                value={this.state.post.description}
                placeholder="post description"
              ></textarea>
            </div>
            <div className="form-group">
              <input
                className="col-12 form-control"
                name="salary"
                onChange={this.handleChange}
                type="number"
                value={this.state.post.salary}
                placeholder="post salary"
              />
            </div>
            <div className="form-group">
              <select
                className="form-control"
                onChange={this.handleChange}
                name="level"
                value={this.state.post.level}>
                  <option>Junior</option>
                  <option>Mid</option>
                  <option>Senior</option>
                  <option>Any</option>
              </select>
             </div>
            <button className="btn btn-primary" onClick={this.handleSubmit}>Submit</button>
          </form>
        </div>



        <div className="post-container">
          <ul>
            {this.state.jobs.map((job, index) => (
              <li key={index}>
                <ul className="post-tile">
                  <li className="post-tile-name">{job.name}</li>
                  <li className="post-tile-level">{job.level}</li>
                  <li className="post-tile-description">{job.description}</li>
                  <li className="post-tile-salary">£{job.salary}</li>
                </ul>
              </li>
            ))}
          </ul>
        </div>
      </div>
    );
  }
}

我试过移动它并使用 as:

<Form
   onChange={this.handleChange}
   name={this.state.post.name}
   description={this.state.post.description}
   level={this.state.post.level}
/>

但不确定如何将它们连接起来...任何指导将不胜感激！

Answer 1

这是正确的处理方式。

将post 数据作为 1 个 propForm 组件发送并处理来自主组件的 handleChange 和 handleSubmit 事件。

检查这个使用Form.js 组件的codesandbox example。

<Form handleChange={this.handleChange} post={this.state.post} handleSubmit={this.handleSubmit} />

Form.js 组件看起来像：

    import React from "react";

    export default ({ handleChange, handleSubmit, post }) => {
      return (
        <div className="form-container">
          <form>
            <div className="form-group">
              <input
                className="col-12 form-control"
                name="name"
                onChange={handleChange}
                type="text"
                value={post.name}
                placeholder="post name"
              />
            </div>
            <div className="form-group">
              <textarea
                className="col-12 form-control"
                name="description"
                onChange={handleChange}
                type="text"
                value={post.description}
                placeholder="post description"
              />
            </div>
            <div className="form-group">
              <input
                className="col-12 form-control"
                name="salary"
                onChange={handleChange}
                type="number"
                value={post.salary}
                placeholder="post salary"
              />
            </div>
            <div className="form-group">
              <select
                className="form-control"
                onChange={handleChange}
                name="level"
                value={post.level}
              >
                <option>Junior</option>
                <option>Mid</option>
                <option>Senior</option>
                <option>Any</option>
              </select>
            </div>
            <button className="btn btn-primary" onClick={handleSubmit}>
              Submit
            </button>
          </form>
        </div>
      );
    };