写一个react简单的页面
时间: 2023-08-05 07:03:42 浏览: 50
下面是一个简单的 React 页面示例,它包含一个输入框和一个按钮,当用户点击按钮时,将输入框中的文本显示在页面上:
```jsx
import React, { useState } from 'react';
function MyPage() {
// 使用 React 的状态钩子 useState 来定义 input 文本的状态
const [inputText, setInputText] = useState('');
function handleButtonClick() {
alert(`你输入的文本是:${inputText}`);
}
return (
<div>
<input
type="text"
value={inputText}
onChange={e => setInputText(e.target.value)}
/>
<button onClick={handleButtonClick}>点击我</button>
<p>你输入的文本是:{inputText}</p>
</div>
);
}
export default MyPage;
```
上述代码创建了一个组件 MyPage,其中包含一个输入框、一个按钮和一个段落标签。使用 useState 钩子来定义 inputText 的状态,并将其初始值设置为空字符串。输入框的值绑定到 inputText 状态上,每次用户输入文本时,使用 onChange 事件更新 inputText 状态的值。当用户点击按钮时,调用 handleButtonClick 函数,弹出一个包含 inputText 的警告框。页面上还显示了当前输入的文本。