如何在反应中获取地图返回按钮的值

Question

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

如代码所示：如何获取“button”的值，在我的例子中，value 应该是“country”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)} />

如何在反应中获取地图返回按钮的值

how to get the value of a map returned button in react

button

array-map

reactjs