从 REACT 中的输入字段呈现动态行

Question

我是 React 的新手，我的问题很简单，我有一个表单，它有一个输入字段，可以获取一些输入数据，在提交表单时，输入数据应该呈现为一行并删除按钮，我们可以删除它如果 onClicked 的数据。我已经实现了行的呈现，但在删除功能方面存在疑问。

App.js 文件的代码是，

import React, { Component } from "react";

export default class App extends Component {
  state = {
    names: [],
  };

  handleSubmit = (event) => {
    event.preventDefault();
    let value = document.getElementById("namevalue").value;
    const obj = { id: Date.now(), value };
    this.setState({
      names: [obj, ...this.state.names],
    });
    document.getElementById("myform").reset();
    
   
    return;
  };

  renderTable() {
    return (
      this.state.names &&
      this.state.names.map((name) => {
        const { id, value } = name; //destructuring
        return (
          <tr key={id}>
            <td>{value}</td>
            <td>
              <input
                type="button"
                value="Delete"
                onClick={this.deleteName(id)}
              />
            </td>
          </tr>
        );
      })
    );
  }

  deleteName = (id) => {
    console.log(id);
    /* this.setState({
      names: this.setState.names.filter((name) => name.id !== id),
    });*/
  };

  render() {
    return (
      <>
        <form onSubmit={this.handleSubmit} id="myform">
          <label>
            Name:
            <input type="text" name="name" id="namevalue" />
          </label>
          <input type="submit" value="Submit" />
        </form>

        {/* Table */}
        <br />
        <table>
          <tbody>
            <tr>
              <th>Names</th>
              <th>Operation</th>
            </tr>
            {/* Render dynamic rows
             */}
            {this.renderTable()}
          </tbody>
        </table>
      </>
    );
  }
}

你可以看到我已经实现了 delete 方法但是它抛出了错误

我想在单击删除按钮时删除该行，但单击按钮时会引发错误，

Answer 1

首先，onClick 值应该是函数引用，否则会引入渲染循环。

onClick={() => this.deleteName(id)}

然后可以使用array.splice函数实现删除功能，如下：

deleteName = (id) => {
    console.log(id);
    const { names } = this.state;
    const index = names.findIndex(name => name.id === id);
    this.setState({
      names: [
        ...names.splice(index, 1),
      ]
    })
  };

Answer 2

对于总是这样使用的 Class 组件， onClick={() => this.deleteName(id)}

对于功能组件 onClick = {deleteName(id)

Answer 3

export default class App extends Component {

  state = {
    names:[]
  };

  
  handleSubmit = (event) => {
    event.preventDefault();
    let value = document.getElementById("namevalue").value;
    const obj = { id: Date.now(), value };
    this.setState({
      names: [obj, ...this.state.names],
    });
    document.getElementById("myform").reset();
    
   
    return;
  };

  deleteName = (id) => {
    console.log(id);
     this.setState({
      names: this.state.names.filter((name) => name.id !== id) //corrected here
    });
  };


  renderTable() {
    return (
      this.state.names &&
      this.state.names.map((name) => {
        const { id, value } = name; //destructuring
        return (
          <tr key={id}>
            <td>{value}</td>
            <td>
              <input
                type="button"
                value="Delete"
                onClick={()=>this.deleteName(id)} //corrected here
              />
            </td>
          </tr>
        );
      })
    );
  }

 

  render() {
    return (
      <>
        <form onSubmit={this.handleSubmit} id="myform">
          <label>
            Name:
            <input type="text" name="name" id="namevalue" />
          </label>
          <input type="submit" value="Submit" />
        </form>

        {/* Table */}
        <br />
        <table>
          <tbody>
            <tr>
              <th>Names</th>
              <th>Operation</th>
            </tr>
            {/* Render dynamic rows
             */}
            {this.renderTable()}
          </tbody>
        </table>
      </>
    );
  }
}```