Question

在这里，我创建了一个应用程序来动态添加许多行和列。

我想在点击删除时删除创建的列，我尝试了很多操作，但对我来说无效。

当我添加列删除按钮时，它也停止了行删除功能。

这是我的工作示例：（在此示例中，我给定了静态值，但最初它具有使用用户输入给定的值）

工作代码：

https://codesandbox.io/s/kk0rn33wqr

//Remove column handler
onRemoveEvent = id => {
   alert(id);

   this.setState({
      //rowCount
    });
};


//Here created remove button
class Table extends Component {
  render() {
      let rowCount = this.props.rowCount;
      let numberOfColumn = this.props.numberOfColumn;
      return (
        <div id="Table">
          <table>
            <tr>{
                Array.from({length: numberOfColumn}).map((_, removeIdx) => (
                  <td>
                    <button onClick={() => this.onRemoveEvent(removeIdx)}>Remove</button>
                  </td>
                ))}
            </tr>

            {rowCount}
          </table>
        </div>
      );
    }
  }

任何帮助将不胜感激。

Answer 1

我按照与您的代码相同的方式将它们拼凑在一起。我希望它有用。

myBuildType {
    initWith debug
    ...
}

function Thead({ n, handleColumn }) {
  const arr = [];
  for (let i = 0; i < n; i++) {
    arr.push(<td><button onClick={() => handleColumn(i)}>Remove</button></td>);
  }
  return <thead>{arr}</thead>;
}

function Row({ row, i, handleRow }) {
  return (
    <tr>
      {row.map(cell => <td>{cell}</td>)} 
      <td><button onClick={() => handleRow(i)}>x</button></td>
    </tr>
  )
}

class Table extends React.Component {

  constructor(props) {
    super(props);
    this.state = { data: props.data };
    this.handleColumn = this.handleColumn.bind(this);
    this.handleRow = this.handleRow.bind(this);
  }
  
  handleColumn(n) {
    const newData = this.state.data.map(row => {
      return row.filter((el, i) => i !== n);
    });
    this.setState({ data: newData });
  }
  
  handleRow(n) {
    const newData = this.state.data.filter((el, i) => i !== n);
    this.setState({ data: newData });
  }
  
  render() {
    return (
      <table>
        <Thead n={this.state.data[0].length} handleColumn={this.handleColumn} />
        <tbody>
          {this.state.data.map((row, i) => <Row row={row} i={i} handleRow={this.handleRow} />)}
        </tbody>
      </table>
    )
  }

}

const data = [
  [1, 2, 3],
  [2, 2, 3],
  [3, 2, 3]
]

ReactDOM.render(
  <Table data={data} />,
  document.getElementById('container')
);

反应从表中删除列

1 个答案: