Reactjs 通过回调将按钮传递给组件

如果我有一个表，它由行和该表的容器组成，希望将按钮向下传递到该表，但自行处理单击，该怎么办？请参阅下面未测试的代码，其中说明了这种情况。如果我这样做，它将不起作用，因为data employee显然会变成[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>
    )
  }
}

---

将按钮作为组件传递，该组件接收表示点击操作的道具和表示点击数据的另一道具

说：

---

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

重构

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

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

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

---

你可以用闭包来解决你的问题

class TableContainer extends React.Component {

  constructor(props) {
    super(props);
  }

  rowButtonClick(employee) {
    return (event) => {
      //Add employee handling here.
    };
  }

  render () {

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

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

---

这将确保员工信息始终可供内部职能部门使用。

您对按钮本身的看法有一半是正确的，但对数组的看法是错误的，如果他需要将其重新用于不同的视图，该怎么办？或者有不同文字或样式的按钮？这是非常硬编码的，不灵活，并且每一个新的需求都需要对代码进行更改……是的，OB Fullstack Kenobi是正确的。我需要将按钮作为数组传递，以使其灵活。事实上，我最初将它们作为硬编码元素，但现在将它们转换为这个元素数组，这样我就可以在更高的级别上决定要使用哪些按钮。这个答案对我来说是不正确的。我不知道为什么这一点被否决了，乍一看，这似乎是解决我问题的办法。我认为唯一有点遗憾的是，我无法将元素本身传递给EmployeeTable，这使得它的灵活性有所降低。我将很快对此进行测试，如果适用，我将返回投票/标记为答案。@Ambidex如果它能帮助您自由地向上投票并选择作为正确答案，我非常确定这不会起作用，employee是一个将在data employee属性中呈现[object object object]的对象。@Ambidex同意它不会更改data employee。我正在为点击评论提供一个解决方案：//GettheEmployeefromOnClick事件。我不知道为什么您确实需要data employee字段，但如果您尝试在此处放置对象，它将始终为您提供[object object]。您可以尝试对其进行JSON.stringify[link][link]处理，然后在需要使用它时，执行JSON.parse以从字符串中获取对象。

class TableContainer extends React.Component {

  constructor(props) {
    super(props);
  }

  rowButtonClick(employee) {
    return (event) => {
      //Add employee handling here.
    };
  }

  render () {

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

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