如何获取react中map返回按钮的值

Question

return (
<div>
{
countries.map((country)=>
<div key={country.ccn3}>
{country.name.common}<button className="button" value={country} onClick={ChangeDisplay}>show</button>

</div>
)
}

</div>
);
}

正如代码所示：如何获得"；按钮"；，在我的情况下，值应该是"；国家；obj，它可以用onClick函数"；ChangeDisplay"；。

Answer 1

数据属性是一个不错的方法。

对于按钮：

<button data-value={country} onClick={changeDisplay}>show</button>

点击处理程序：

const changeDisplay = (e) => {
const { value } = e.target.dataset;
console.log(value);
};

Answer 2

您可以像处理表单字段一样，简单地从e.target.value中获取值。值必须是字符串。

const App = () => {
const onClick = (e) => alert(e.target.value)
return (<button onClick={onClick} value="my button value">MyButton</button>)
}
ReactDOM.render(
<App />,
document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

如果要传递对象。然后，只需将对象传递给函数，就可以不使用event。

<button onClick={()=> ChangeDisplay(country)} />