主页 / 问题 / 871626
Accepted
Екатерина Нагорная
Asked:2020-08-22 01:44:56 +0000 UTC2020-08-22 01:44:56 +0000 UTC

如何将参数值传递给 onClick 上的另一个组件

  • 772

React中有一个形成表格的循环，需要在onClick上将这个循环的每次迭代的值输出到控制台，简单来说——被点击的单元格的地址。现在迭代的总值显示在控制台中。我知道为此您需要创建一个单独的组件，在哪里传递参数的值，但我不知道该怎么做

  class Table extends Component{
  constructor (){
  super();
  this.cellClick = this.cellClick.bind(this);
  }
  cellClick () {
    console.log (i,j)
  }
  render(){
    var trs= new Array();
    for (var i = 0; i <= this.props.rows; i++) {
      var tds = new Array();
      for (var j = 0; j <= this.props.columns; j++) {
        tds.push (<td columns = {i} rows = {j} onClick = {this.cellClick}> 
        {i} x {j} </td>)
       }
      trs.push(<tr>{tds}</tr>)
     }
    return (
        <table>
          {trs}
        </table>
     )
    }
   }
reactjs

1 个回答

  1. Best Answer

    选项 1. 快速，但被视为反模式：

    cellClick = (i, j) => {
    console.log (i,j)
};
....
tds.push (
    <td columns = {i} rows = {j} onClick = {this.cellClick.bind(this, i, j)}> 
        {i} x {j} 
    </td>
)

    选项 2. 为 td 创建一个单独的组件：

    class MyTd extends React.Component {
    onClick = () => {
        this.props.onClick(this.props.columns, this.props.rows);
    };

    render() {
        return <td onClick = {this.onClick}> 
            {this.props.children}
        </td>
    }
}

class Table extends Component{
  cellClick = (i, j) => {
    console.log (i,j)
  };

  render(){
    ....    
        tds.push (<MyTd columns = {i} rows = {j} onClick = {this.cellClick}> 
        {i} x {j} </MyTd>)
       }
    ....
   }
}
    • 2

相关问题