javascript - 删除行时单击“React”

Question

我有以下代码，其中添加动态行和列。我想删除点击时的行。

但是，很难弄清楚。

class TableCells extends Component {

  onDeleteEvent = event => {
    // Delete row 
  };

  render() {

      var numberOfRow = this.props.numberOfRow; // user input
      var numberOfColumn = this.props.numberOfColumn; // user input

      var rows = Array.from({length: numberOfRow}).map((_, rowIdx) => (

        <tr key={rowIdx}>{
          Array.from({length: numberOfColumn}).map((_, colIdx) => (
            <EditableCell key={colIdx}/>
          ))
        }

        <td>
          <input type="button" onClick={this.onDeleteEvent} value="X" />
        </td>
        </tr>
      ))

      return (<tbody>{rows}</tbody>);
  }
}

任何帮助将不胜感激。

Answer 1

检查此沙箱。有点简化，但对你有用。 https://codesandbox.io/s/9l9wnonyp

基本上，在状态中移动你的对象，当你删除该项目时，发送他的 ID 作为参数，然后设置新的状态，它就会重新渲染。

<input
   type="button"
   onClick={() => this.onDeleteEvent(rowIdx)}
   value="X"
/>

和 onDeleteFunction:

onDeleteEvent = id => {
    // Delete row
    let rows = this.state.rows;
    rows.splice(id, 1);

    this.setState({
      rows
    });
  };

对于任何其他问题，请在这里评论，我会帮助你:)