Question

在反应中我有这样的代码：

 var myButtons=[];
 /*Products is an array of objects where each object identify a product*/
 for (var p of Products) {
     var button = <button 
                       style={someStyle}
                       onClick={onClickFunction}>
                       p.name
                  </button>
     myButtons.push(button)
 }

我将在渲染命令中使用此react按钮数组。我遇到的问题是我不知道如何使用其中一个按钮通过onClickFunction显示其标签p.name。

Answer 1

您可以将标签添加为参数：

<button style={someStyle} onClick={p.name => onClickFunction(p.name)}>
    p.name
</button>

并且：

onClickFunction = (label) => () =>{
    console.log(label)
}

Answer 2

更简单，更友好的方式是使用函数迭代数据。（请注意，这不会考虑范围，因此如果组件内部可能需要this）

function makeButton(data) {
    return (
        <button 
            style={someStyle}
            onClick={() => onClickFunction(data.label)}> //pass parameter for callback here if binding isn't used
            data.name
        </button>
    );
}

现在您只需在div中使用绑定贴图！

<div>
    {Products.map(makeButton, this)}
</div>

Answer 3

最简单的方法是使用ES6语法和数组map name属性应该是唯一的，不要忘记为每个按钮提供一个键：

const myButtons = Products.map(p => (
  <button style={someStyle} onClick={e=>{ this.onClickFunction(e, p.name); }} key={p.name}/>
    {p.name}
  </button>
));

使用箭头功能，因此不需要.bind(this)。如果按钮位于e.preventDefault()。

，请添加form以防止默认行为

onClickFunction = (e, name) => {
  e.preventDefault();
  // Your button behavior goes here.
}

在React中使用一组按钮

3 个答案: