javascript - 按钮数组的 onClick 函数不起作用

Question

这里列表从 app.component 获取“n”个值。我正在尝试为每个按钮编写 onclick 函数。这是代码

onChildButtonClick = (val) => {
console.log(val);}



function makeButton(data) {
return (
     <button onClick = {this.onChildButtonClick.bind(null, data.name)} > 
        {data.name} </button>
);}

const List = (props) => {
    const {projectnames} = props
    return (
        <tr>
        <div> {
            projectnames.map(makeButton, this)
        }
        </div>
        </tr>
    )
}

当我尝试执行时，它会抛出错误 onChildButtonClick is not Defined。

Answer 1

正如上面的代码所示，您正在引用 this.onChildButtonClick ，它在函数的范围内查找。但是您的函数 onChildButtonClick 超出了该范围。

编辑:

我还没有机会测试它，但试试这个:

function makeButton(data) {

  const onChildButtonClick = (val) => {
    console.log(val);
  }

  return (
       <button onClick = {onChildButtonClick.bind(this, data.name)} >
          {data.name} </button>
  );
}

const List = (props) => {
    const {projectnames} = props
    return (
        <tr>
        <div> {
            projectnames.map(makeButton, this)
        }
        </div>
        </tr>
    )
}