时间戳

首页 > 解决方案 > 使用回调将按钮向下传递给组件

reactjs - 使用回调将按钮向下传递给组件

问题描述

如果我有一个由行组成的表格，并且我的表格容器想要将按钮向下传递到表格但自己处理点击怎么办？请参阅下面的未经测试的代码来说明这种情况。如果我这样做，它不会起作用，因为data-employee会变得很[object Object]明显。我将如何传递按钮，同时确保 EmployeeTable 能够将员工附加到按钮？


class TableContainer extends React.Component {

  constructor(props) {
    super(props);
  }

  rowButtonClick(e) {
    // Get the employee from onClick event somehow
  }

  render () {

    let rowButtons = [
      employee => (<button onClick={this.rowButtonClick} data-employee={employee}>View</button>),
      employee => (<button onClick={this.rowButtonClick} data-employee={employee}>Delete</button>)
    ]

    return (
      <EmployeeTable rowButtons={rowButtons} />
    );
  }
}

class EmployeeTable extends React.Component {

  /** Fetches it's own employees in state **/

  render () {
    return (
      <table>
        {this.state.employees.map((employee, key) => {
        <tr>
          <td>{employee.name}</td>
          <td>
            {this.props.employeeButtons.map((btn, key) => {
              return btn(employee);
            })}
          </td>
        </tr>
        })}
      </table>
    )
  }
}

标签： reactjs

解决方案

你不需要像那样传递按钮数组。

重构

//***************************************************/

class TableContainer extends React.Component {

  viewEmployee(employee) {
      console.log('Called view on:', employee.name)
  }

  deleteEmployee(employee) {
      console.log('Called delete on:', employee.name)
  }

  render () {

    return (
      <EmployeeTable 
        viewEmployee={(employee) => this.viewEmployee(employee)}
        deleteEmployee={(employee) => this.deleteEmployee(employee)} 
      />
    );
  }
}

//***************************************************/

class EmployeeTable extends React.Component {

  /** Fetches it's own employees in state **/

  render () {
    return (
      <table>
        {this.state.employees.map(employee => {
          <tr>
            <td>{employee.name}</td>
            <td>
              <button onClick={() => this.props.viewEmployee(employee)}>View</button>
              <button onClick={() => this.props.deleteEmployee(employee)}>Delete</button>
            </td>
          </tr>
        })}
      </table>
    )
  }
}

//***************************************************/

推荐阅读