Question

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

该组件当前包含具有多个输入的表单，并在onSubmit上呈现它们。据我了解，执行此操作的最佳方法是将表单放入其自己的组件中，然后使用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>
    );
  }
}

我尝试移动它并用作：

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

但是不确定如何将所有内容连接起来...任何指导将不胜感激！

Answer 1

这是正确的处理方式。

将post数据作为1个prop Form组件发送，并从主要组件处理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>
      );
    };

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

1 个答案: