代码之家  ›  专栏  ›  技术社区  ›  ketan

从表中删除列

  •  0
  • ketan  · 技术社区  · 6 年前

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

    我想删除删除点击创建列,我尝试了很多事情,但没有为我工作。

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

    这里是我的工作示例:(在这个示例中,我给出了静态值,但最初它使用用户输入给出了值)

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

    任何帮助都将不胜感激。

    1 回复  |  直到 6 年前
        1
  •  1
  •   Andy    6 年前

    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>