表白前端react代码源码

表白前端React代码源码如下：

import React, { useState } from 'react';

const App = () => {
const [message, setMessage] = useState('');
const [isSubmitted, setIsSubmitted] = useState(false);

const handleSubmit = (e) => {
e.preventDefault();
setIsSubmitted(true);
};

const handleChange = (e) => {
setMessage(e.target.value);
};

return (
<div>
{isSubmitted ? (
<h2>
亲爱的，我想对你说: <span>{message}</span>
</h2>
) : (
<form onSubmit={handleSubmit}>
<h2>请在下方输入你要表白的话：</h2>
<input
type="text"
placeholder="请输入你要表白的话"
value={message}
onChange={handleChange}
/>
<button type="submit">提交</button>
</form>
)}
</div>
);
};

export default App;

以上代码中，我们使用了React的函数式组件来实现表白功能。首先，我们使用useState来定义两个状态变量，分别为message和isSubmitted。message用来存储用户输入的表白话语，isSubmitted用来判断是否已提交表白。

然后，在handleSubmit函数中，我们使用preventDefault阻止表单的默认提交行为，并将isSubmitted状态设为true，以显示表白的内容。

在handleChange函数中，我们通过onChange事件监听输入框的变化，并将用户输入的内容存入message状态。

最后，在组件的return中，我们使用条件语句来判断是否已提交表白，根据isSubmitted的值来显示不同的内容。如果已提交表白，将显示用户输入的表白话语，否则，将显示输入框和提交按钮。

通过以上代码，我们可以实现一个简单的表白功能。用户可以在输入框中输入自己想要表白的话语，点击提交按钮后，将显示表白的内容。