处理输入字段为组件的输入表单

Question

有这个动态表单组件。
主.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>提交表单

Answer 1

根据给定的代码，我们需要两个值。一个是邮箱，一个是密码。

因此需要向表单元素电子邮件和密码添加两个状态。这些值需要根据输入的变化而改变。

因此，当表单提交时，这些值可用于执行所需的任何操作

如果我们只使用 react 而不是其他表单库，例如 react hook form，代码可能是这样的

Main.js

从“./RegistrationItem”导入RegistrationItem .......

    const [email,setEmail] = useState('');
    const [password,setPasword] = useState('')

     <Form onSubmit={(e) => {e.preventDefault();handleSubmit(email,password,...otherArgs);}}>
          <RegistrationItem
            inputtype="email"
            inputplaceholder="Email Address*"
            icon={faEnvelope}
            value={email}
            setValue={setEmail}
          />
          <RegistrationItem
            inputtype="password"
            inputplaceholder="Password*"
            icon={faLock}
            value={password}
            setValue={setPassword}
          />
         <button type="submit" > Login </button>
    </Form>

RegistrationItem.js

    const RegistrationItem = ({inputtype,inputname,inputid,inputplaceholder,value,setValue,icon}) ={
return(
    <InputGroup className=" mb-4">
      <Input
        type={inputtype}
        name={inputname}
        id={inputid}
        placeholder={inputplaceholder}
        value={value}
        onChange={e=>setValue(e.target.value)}
        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>
)
}

Answer 2

you need to declare state and pass that to your child component and can update the state from child element and when you click on login you can use the state.

below i have shown you how you can declare the state and how you can pass it to your child element and in child element you can use it.
note : i have just passed it in your child component and over ther in argument you can see it so wherever you want to use them you can use it.


  const [registrationTypeValue,setRegistrationTypeValue]=useState("")
             <Form onSubmit={(e) => {e.preventDefault();}}>
                  <RegistrationItem
                    inputtype="email"
                    inputplaceholder="Email Address*"
                    icon={faEnvelope}
                    registrationTypeValue={registrationTypeValue}
                    setRegistrationTypeValue={setRegistrationTypeValue}/>
                  <RegistrationItem
                    inputtype="password"
                    inputplaceholder="Password*"
                    icon={faLock}
                  />
                 <button onClick={handleLogin()} > Login </Login></Form>
    
    
    const RegistrationItem = ({registrationTypeValue,setRegistrationTypeValue}) ={
    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>
    )
    }