Question

这两个前两个代码片段均出现在类组件中。这是onClick处理程序：

selectChoice = (id) => {
  console.log(id)
}

在这里我调用功能部件，该部件生成我需要的id和onClick方法。

<ReturnChoices choices={this.state.choices} selectChoice={() => this.selectChoice(id)}/>

这是功能组件。

const ReturnChoices = ({choices, selectChoice}) => {
  return choices.map(( choice , index) => (
    <li key={index} id={index} onClick={() => { selectChoice(this.id) }}>
      {choice}
    </li>
  ))
}

由于某种原因，id会以“ undefined”的形式出现

Answer 1

将id作为参数提供的ReturnChoices传递给调用方函数

<ReturnChoices choices={this.state.choices} selectChoice={(id) => this.selectChoice(id)}/>

Answer 2

通过函数本身，无需包装其他函数：

<ReturnChoices choices={this.state.choices} selectChoice={this.selectChoice}/>

React：通过onClick将属性从功能组件传递到类组件

2 个答案: