将输入中的值添加为 ReactJS 中的新表行

Question

我想从输入字段中获取值，并放在它下面的表格中。

• crudAdd.js - 定义状态、事件处理程序、呈现表单本身
• crudTable.js - 映射 mainCrud.js 中定义的预定义行，呈现表格本身

试图弄清楚如何连接 crudAdd.js 和 crudTable.js，以便 crudAdd.js 最终将值从输入推送到表中。

Link to CodeSandbox（表单位于活动、开发和新闻标签下）。

MainCrud.js

import React, { useState } from "react";

import CrudIntro from "../crud/crudIntro/crudIntro";
import CrudAdd from "../crud/crudAdd/crudAdd";
import CrudTable from "../crud/crudTable/crudTable";

const MainCrud = props => {
  // Project Data
  const projectData = [
    {
      id: 1,
      name: "Skid Steer Loaders",
      description:
        "To advertise the skid steer loaders at 0% financing for 60 months.",
      date: "February 1, 2022"
    },
    {
      id: 2,
      name: "Work Gloves",
      description: "To advertise the work gloves at $15.",
      date: "February 15, 2022"
    },
    {
      id: 3,
      name: "Telehandlers",
      description: "To advertise telehandlers at 0% financing for 24 months.",
      date: "March 15, 2022"
    }
  ];

  const [projects, setProject] = useState(projectData);

  // Add Project
  const addProject = project => {
    project.id = projectData.length + 1;
    setProject([...projects, project]);
  };

  return (
    <div>
      <section id="add">
        <CrudIntro title={props.title} subTitle={props.subTitle} />
        <CrudAdd addProject={addProject} />
      </section>
      <section id="main">
        <CrudTable projectData={projects} />
      </section>
    </div>
  );
};

export default MainCrud;

CrudAdd.js

import React, { Component } from "react";

import "../crudAdd/crud-add.scss";
import "../../button.scss";

class CrudAdd extends Component {
  state = {
    name: "",
    description: "",
    date: "",
    items: []
  };

  handleInputChange = e => {
    let input = e.target;
    let name = e.target.name;
    let value = input.value;

    this.setState({
      [name]: value
    });
    // console.log(e.target.value);
  };

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

    let items = [...this.state.items];

    items.push({
      name: this.state.name,
      description: this.state.description,
      date: this.state.date
    });

    this.setState({
      // Clear values
      name: "",
      description: "",
      date: ""
    });

    console.log(this.state.name);
    console.log(this.state.description);
    console.log(this.state.date);
  };

  render() {
    return (
      <div>
        <form onSubmit={this.handleFormSubmit}>
          <input
            name="name"
            type="name"
            placeholder="Name..."
            id="name"
            value={this.state.name}
            onChange={e => this.setState({ name: e.target.value })}
          />
          <input
            name="description"
            type="description"
            placeholder="Description..."
            id="description"
            value={this.state.description}
            onChange={e => this.setState({ description: e.target.value })}
          />
          <input
            name="date"
            type="name"
            placeholder="Date..."
            id="date"
            value={this.state.date}
            onChange={e => this.setState({ date: e.target.value })}
          />
          <button type="submit" className="btn btn-primary">
            Add Project
          </button>
        </form>
      </div>
    );
  }
}

export default CrudAdd;

CrudTable.js

import React, { Component } from "react";

import "../crudTable/crud-table.scss";

class CrudTable extends Component {
  render() {
    const props = this.props;
    return (
      <div>
        <div class="table-responsive">
          <table class="table">
            <thead>
              <tr>
                <th scope="col">Project Name</th>
                <th scope="col">Project Description</th>
                <th scope="col">Date</th>
                <th scope="col">&nbsp;</th>
              </tr>
            </thead>
            <tbody>
              {props.projectData.length > 0 ? (
                props.projectData.map(project => (
                  <tr key={project.id}>
                    <td>{project.name}</td>
                    <td>{project.description}</td>
                    <td>{project.date}</td>
                    <td>
                      <button className="btn btn-warning">Edit</button>
                      <button className="btn btn-danger">Delete</button>
                    </td>
                  </tr>
                ))
              ) : (
                <tr>
                  <td>No projects found. Please add a project.</td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}

export default CrudTable;

Answer 1

这是在您的沙盒中为我工作的代码：

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

    this.props.addProject({
      name: this.state.name,
      description: this.state.description,
      date: this.state.date
    });

    this.setState({
      name: "",
      description: "",
      date: ""
    });
  };

解释如下：

您所说的是组件之间的兄弟姐妹通信。有许多有用的 articles 和 approaches。从根本上说，vanilla React 希望您使用 props 作为组件的输入，并使用作为 props 传入的函数处理输出。

一种方法是在其父组件中定义table 组件的数据，并在父组件中编写一个方法来修改此数据。将函数传递给add 子组件，并将数据传递给table 组件。然后，当add 调用该函数时，它会修改父级中的数据。父的状态数据被修改会导致子用新数据重新渲染！