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。

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

按钮阵列的onClick函数不起作用

1 个答案: