javascript - 如何在 ReactJS 中动态添加或删除表

Question

我想通过单击添加来添加表格行，并通过单击表格内的小红色 div 来删除表格行，同时在单击表格时保留颜色更改选项。

我已经尝试了几个小时，但我还是 ReactJS 的新手，也许有人可以给我一个提示，如何做到这一点，例如在数组、布尔值或 for 循环的帮助下？我还没有找到正确的方法，非常感谢您的意见。

我一直在考虑这种逻辑，但还没有能够实现它..

{Boolean(this.state.rows.length) && (
                <div onClick={this.handleRemoveRow}></div>
              )}

https://jsfiddle.net/mattighof/0uop13kd/

标签： javascriptreactjs

Answer 1

请执行下列操作：

• 保持状态说list并存储您的所有物品
• 创建onClick用于在表中添加和删除项目的处理程序
• 添加/删除时更新状态
• 迭代和渲染this.state.list
• 确保event.stopPropagation()在删除处理程序中执行。这样，您的颜色更改功能仍然有效。

见这里添加和删除项目的实现

代码片段：

class Table extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tableColor: true,
      list: []
    };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState({
      tableColor: !this.state.tableColor
    });
  }
  addItem() {
    this.setState({ list: this.state.list.concat("item") });
  }
  removeItem(e, index) {
    e.stopPropagation();
    this.setState({ list: this.state.list.filter((_, i) => index !== i) });
  }

  render() {
    return (
      <div className="container">
        <button onClick={this.addItem} type="button">
          Add
        </button>
        <table>
          {this.state.list.map((item, index) => {
            return (
              <tr>
                <td
                  className={this.state.tableColor ? "trRed" : "trBlack"}
                  onClick={this.handleClick}
                >
                  {item}
                  <div
                    onClick={e => this.removeItem(e, index)}
                    className="innerDiv"
                  />
                </td>
              </tr>
            );
          })}
        </table>
      </div>
    );
  }
}