要使用“表单 Semantic UI React”包,首先需要安装Semantic UI React和React的依赖。然后,您可以使用以下步骤在React应用程序中创建一个包含表单的Semantic UI:
npm install semantic-ui-react semantic-ui-css
import React, { useState } from 'react';
import { Button, Form } from 'semantic-ui-react';
function MyForm() {
const [formData, setFormData] = useState({
name: '',
email: '',
password: ''
});
const handleSubmit = () => {
// 处理表单提交逻辑
};
const handleChange = (e, { name, value }) => {
setFormData(prevState => ({
...prevState,
[name]: value
}));
};
return (
);
}
在上面的代码中,我们使用useState
钩子来创建一个以formData
为初始值的状态。handleChange
函数用于更新formData
的值,handleSubmit
函数用于处理表单的提交逻辑。
MyForm
组件:function App() {
return (
);
}
export default App;
现在,您就可以在应用程序中使用Semantic UI React的表单组件了。当用户提交表单时,handleSubmit
函数将被调用,您可以在该函数中处理表单的提交逻辑。