如何在点击时获取按钮的值并在 React 中写出？

Question

想象一个计算器屏幕。我可以写出button的值一次，但不能多次。我想要的是，如果我点击这个按钮很多次，就会写出这个值

import { useState } from "react";
function App() {
const [data, setData] = useState({ number: "" });
return (
<>
<h1>Calculator screen: {data.number}!</h1>
<button
type="button"
value="1"
onClick={(e) => setData({ ...data, number: e.target.value })}
>
1
</button>
</>
);
}
export default App;

Answer 1

这里的问题是您正在用相同的值覆盖以前的number，您需要的是将字符串连接起来。

像这样做:

onClick={(e) => setData({ ...data, number: `${data.number}${e.target.value}` })}

这将前一个值与新添加的值连接起来，使字符串变得"更大"。