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
    });
  };

对于任何其他问题，请在此处评论，我会为您提供帮助：）

Answer 2

正确的方法是：

class TableCells extends Component {

  render() {
      const onDeleteEvent = (id) => () => this.props.onDeleteEvent(id);
      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={onDeleteEvent(colIdx)} value="X" />
        </td>
        </tr>
      ))

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

无论您使用TableCells并存储要作为TableCells的道具传递的行数的地方，都将具有减少传递的行数的功能，从而影响{{ 1}}属性。

我猜您正在使用numberOfRow这样的东西：

TableCells

您应该这样更改它：

<TableCells numberOfRow={this.state.numberOfRow} numberOfColumn={this.state.numberOfColumn} />

Answer 3

您可以尝试这个

class TableCells extends Component {
  state = {
    numRows = this.props.numberOfRow  // I know it is considered as an antipattern :) But in this case that's ok!!!
  }

  onDeleteEvent = () => {
    // also you should add the check if it's not zero :)
    this.setState({ numRows: this.state.numRows - 1 });
  };

  render() {

      const { numberOfColumn } = this.props; // user input
      const { numRows } = this.state;

      const rows = Array.from({length: numRows }).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 4

  class TableCells extends Component {
    constructor () {
    super()
    this.state = {
      numberOfRow: Array.from({length: this.props.numberOfRow}),
      numberOfColumn: Array.from({length: this.props.numberOfColumn})
    }
  }
  onDeleteEvent (index) {
    this.state.numberOfRow.splice(index, 1)
  };

  render () {
    var rows = this.state.numberOfRow.map((elem, index) => (<tr>
      {this.state.numberOfColumn.map((_, colIdx) => {<EditableCell key={colIdx}/>})}
      <td>
        <input type='button' onClick={() => this.onDeleteEvent(index)} value='X' />
      </td>
    </tr>))
    return (
      <tbody>{rows}</tbody>
    )
  }
}

单击删除行删除行React

4 个答案: