反应从表中删除列

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

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

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

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="container"></div>