如何在 React JS-Functional 组件中使用“Select-Drop down”、“Text Field”、“Text-Area auto size”添加和删除动态行

Posted 2023-02-22

【中文标题】如何在 React JS-Functional 组件中使用“Select-Drop down”、“Text Field”、“Text-Area auto size”添加和删除动态行

【英文标题】：How to add and remove dynamic rows with "Select-Drop down", "Text Field", "Text-Area auto size" in React JS- Functional component

【发布时间】：2022-01-11 22:30:09

【问题描述】：

我是 React JS 的新手。我需要动态开发添加或删除控件（行）。

我在第一行有两个“文本字段”控件、一个“选择（下拉）”控件、“文本区域”控件和一个按钮（添加按钮）控件。 当我单击第二行中的添加按钮时，会自动添加第一行控件。 （文本字段、选择、文本区域、按钮）。第一行值没有改变，第二行字段为空。如何在 React js 功能组件中使用带有 yup 验证的 React Material UI（基于控制器的组件）来执行此操作？ 我在代码沙箱中得到了一些示例代码。但是，代码是在没有验证和使用状态的情况下编写的类内组件。我附上以下链接：

https://codesandbox.io/s/3vk7jxv69p

import React from "react";
import  render  from "react-dom";

class App extends React.Component 
  state = 
    rows: []
  ;
  handleChange = idx => e => 
    const  name, value  = e.target;
    const rows = [...this.state.rows];
    rows[idx] = 
      [name]: value
    ;
    this.setState(
      rows
    );
  ;
  handleAddRow = () => 
    const item = 
      name: "",
      mobile: ""
    ;
    this.setState(
      rows: [...this.state.rows, item]
    );
  ;
  handleRemoveRow = () => 
    this.setState(
      rows: this.state.rows.slice(0, -1)
    );
  ;
  handleRemoveSpecificRow = (idx) => () => 
    const rows = [...this.state.rows]
    rows.splice(idx, 1)
    this.setState( rows )
  
  render() 
    return (
      <div>
        <div className="container">
          <div className="row clearfix">
            <div className="col-md-12 column">
              <table
                className="table table-bordered table-hover"
                id="tab_logic"
              >
                <thead>
                  <tr>
                    <th className="text-center"> # </th>
                    <th className="text-center"> Name </th>
                    <th className="text-center"> Mobile </th>
                    <th />
                  </tr>
                </thead>
                <tbody>
                  this.state.rows.map((item, idx) => (
                    <tr id="addr0" key=idx>
                      <td>idx</td>
                      <td>
                        <input
                          type="text"
                          name="name"
                          value=this.state.rows[idx].name
                          onChange=this.handleChange(idx)
                          className="form-control"
                        />
                      </td>
                      <td>
                        <input
                          type="text"
                          name="mobile"
                          value=this.state.rows[idx].mobile
                          onChange=this.handleChange(idx)
                          className="form-control"
                        />
                      </td>
                      <td>
                        <button
                          className="btn btn-outline-danger btn-sm"
                          onClick=this.handleRemoveSpecificRow(idx)
                        >
                          Remove
                        </button>
                      </td>
                    </tr>
                  ))
                </tbody>
              </table>
              <button onClick=this.handleAddRow className="btn btn-primary">
                Add Row
              </button>
              <button
                onClick=this.handleRemoveRow
                className="btn btn-danger float-right"
              >
                Delete Last Row
              </button>
            </div>
          </div>
        </div>
      </div>
    );
  


render(<App />, document.getElementById("root"));

我希望得到相同的输出，但是我想使用一个带有 yup 验证的功能组件（React Material UI 和基于控制器的组件）。谁知道这个答案告诉我。

【参考方案1】：

如何在 React js 功能组件中使用带有 yup 验证的 React Material UI 来做到这一点

在复制粘贴您在此处找到的一些代码之前，您可以从了解更多信息中受益，但我希望这会有所帮助。

“在 react js 功能组件中”

为此，我建议您从Digital Ocean 快速阅读。本质上，您需要了解，您需要实现React Hooks，而不是在类中管理状态和生命周期事件。有了这里的组件，一旦你阅读了这两个链接，这应该很容易。

“带有 React 材质 UI”

这只需要使用 Material UI 组件更改 html/CSS 表。一个简单的替代方法是保留表结构，但使用 MUI 表单元素，例如 button 和 text field。如果您正在寻找更全面、更强大的更新，我也推荐MUI Data Grid。

“通过 yup 验证”

这真的应该只需要在你的项目中安装它，并准确地实现它as the docs say。您只需要定义模式并通过const tableIsValid = Promise.all(state.map(row => schema.isValid)).every(x => x) 之类的方式检查所有行是否有效，但如果您想通知用户，您将希望按行拆分结果而不是一次全部执行它们行无效。