这里有一个动态表单组件。
main.js
import RegistrationItemfrom "./RegistrationItem"
.......
<Form onSubmit={(e) => {e.preventDefault();}}>
<RegistrationItem
inputtype="email"
inputplaceholder="Email Address*"
icon={faEnvelope}
/>
<RegistrationItem
inputtype="password"
inputplaceholder="Password*"
icon={faLock}
/>
<button onClick={handleLogin()} > Login </Login>
</Form>
用于添加样式和图标的输入字段的文件。
registrationitem.js。
const RegistrationItem = () ={
return(
<InputGroup className=" mb-4">
<Input
type={inputtype}
name={inputname}
id={inputid}
placeholder={inputplaceholder}
className="border-right-0"
/>
<InputGroupAddon addonType="append">
<InputGroupText className="bg-transparent text-primary border-left-0">
<FontAwesomeIcon className="text-primary" icon={icon} />
</InputGroupText>
</InputGroupAddon>
</InputGroup>
)
}
如何通过登录按钮实现表单的提交 <button onClick={handleLogin()} > Login </Login>
2条答案
按热度按时间knpiaxh11#
根据给定的代码,我们需要两个值。一个是电子邮件,另一个是密码。
因此,需要在表单元素email和password中添加两种状态。这些值需要根据输入中的更改进行更改。
因此,在提交表单时,可以使用这些值执行所需的任何操作
如果我们只使用react,而不使用其他表单库(如react-hook-form),那么代码可能是这样的
main.js
从“/registrationitem”导入注册项。。。。。。。
registrationitem.js
3pvhb19x2#