react实现 两个input框,x,y 一个按钮:文本是add,实现x+y,展示到一个div中。
时间: 2024-05-15 10:18:26 浏览: 10
好的,您想实现的功能可以通过以下代码实现:
```
import React, { useState } from "react";
function Add() {
const [x, setX] = useState(0);
const [y, setY] = useState(0);
const [result, setResult] = useState(0);
const handleClick = () => {
setResult(parseFloat(x) + parseFloat(y));
};
return (
<div>
<input
type="number"
value={x}
onChange={(e) => setX(e.target.value)}
placeholder="Enter X"
/>
<input
type="number"
value={y}
onChange={(e) => setY(e.target.value)}
placeholder="Enter Y"
/>
<button onClick={handleClick}>Add</button>
<div>{result}</div>
</div>
);
}
export default Add;
```
在这个组件中,我们使用了 `useState` 将 `x` 和 `y` 的值存储在组件的状态中,并用 `result` 存储加法的结果。当用户点击“Add”按钮时,我们将 `x` 和 `y` 的值相加,并将结果存储到 `result` 中,最后在页面上显示出来。
希望以上代码可以帮到您。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)