从REACT中的输入字段渲染动态行

debugcn 发表于 Dev

Aashiq艾哈迈德

我是React的新手，我的问题很简单，我有一个带有输入字段的表单，该字段获取一些输入数据，并在Submit表单上将输入数据呈现为一行，然后单击Delete按钮，如果出现这种情况，我们可以删除数据我已经实现了行的呈现，但是在删除功能方面存在疑问。

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方法，但是会引发错误

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

Heri Hehe Setiawan

首先，onClick值应为函数引用，否则将引入渲染循环。

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

然后，可以使用array.splice函数实现delete函数，如下所示：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。