Question

我在反应中有主从表。如果我在主表中的一行上选择（或单击一个按钮），那么我想设置一个状态变量，该ID带有所选行的ID，它将用于呈现该ID的详细信息表。但是，react不允许我在事件函数中使用setState。

  constructor(props){
super(props);
this.state = {
  customer: {},
  customerRequests: [],
  interactions: [],
  order: [],
  error: '',
  selectedCustomerRequest: ''
}
this.onSelectCustomerRequest = this.onSelectCustomerRequest.bind(this);

}

事件功能是

  onSelectCustomerRequest(id){
console.log(id)
// this.setState({selectedCustomerRequest: id});

}

HTML是

          <tr key={item._id} onClick={this.onSelectCustomerRequest(item._id)}>
        <td><button onClick={this.onSelectCustomerRequest(item._id)} /></td>
        <td>{moment(item.orderDate).format('DD/MM/YYYY hh:mm')}</td>
        <td>{item.genericName}</td>
        <td>{item.quantity}</td>
        <td>{item.priority}</td>
        <td>{interaction.orderStatus}</td>
        <td>{moment(interaction.created).format('DD/MM/YYYY hh:mm')}</td>
        <td>{interaction.createdBy}</td>
      </tr>

如果我在onSelectCustomerRequest（id）{}中启用setState，则会收到错误消息。其次，我看到onSelectCustomerRequest（）每行都执行一次，因为我在终端上看到console.log。

我只想在仅单击按钮时设置setState。

我确定我在某个地方犯了一个愚蠢的错误，您能帮忙吗？拜托。

Answer 1

这里的问题是，您可以通过在方法末尾添加括号()立即调用该函数。

为使其正常工作，我建议在一个方法中创建一个闭包，因此您的情况应类似于

onSelectCustomerRequest(id) {
  return () => {
    console.log(id)
  }
}

因此，您基本上可以通过在onClick中调用onSelectCustomerRequest来返回一个函数，该函数可以延迟触发。

如何在表格中设置按钮点击事件的状态

1 个答案: