Reactjs onchange输入字段中的表单验证

xhv8bpkk 于 2023-02-18 发布在 React

关注(0)|答案(2)|浏览(146)

你好，我是新的学习者的React。任何人请帮助我在形式验证（onchange）输入字段

<Form.Group className="mb-3" controlId="Username">
        <Form.Label>Username</Form.Label>
        <Form.Control type="text" placeholder="Lastname"  name='username' value={Validation} onChange={textchange}/>
      </Form.Group>
      <Form.Group className="mb-3" controlId="formBasicEmail">
        <Form.Label>Email address</Form.Label>
        <Form.Control type="email" placeholder="Enter email"  name='email' value={Validation.email}  onChange={emailchange}/>
        <Form.Text className="text-muted">
          We'll never share your email with anyone else.
        </Form.Text>
      </Form.Group>
      <Form.Group className="mb-3" >
        <Form.Label>Password</Form.Label>
        <Form.Control type="password" placeholder="Password"  name='password' autoComplete="on"  onChange={passchange}

value={验证密码}/〉</Form.Group><Form.Group className="mb-3" ><Form.Check type="checkbox" label="Check me out" /></Form.Group>提交

reactjs

来源：https://stackoverflow.com/questions/75481215/form-validation-in-reactjs-onchange-input-fields

2条答案

按热度按时间

irtuqstp1#

对于React中的表单，您可以使用formik包进行react，因为它通常有助于验证和表单。
对于表单，如果不需要重新呈现组件，可以使用useRef，或者使用useState和useReducer之一。
通常，在组件中（或以类似的形式）拥有太多的状态不是好的做法。
可以使用useReducer，因为它有助于在一个位置管理整个窗体的onChange属性的逻辑。
通常，onChange属性返回一个event，您可以通过以下方式访问字段中的值：

onChange={event=>{setValue(event.target.value)}}

或者像你这样使用函数：

function handleChange (event) {
setValue(event.target.value);
}
...
<input value={value} onChange={handleChange} />

为了进行验证，您可以根据需要添加的条件，在设置变量状态之前进行检查。

赞(0）回复(0）举报 2023-02-18

mzillmmw2#

我推荐你使用react-hook-form，它是react中管理表单的最佳库。

赞(0）回复(0）举报 2023-02-18

我来回答

Reactjs onchange输入字段中的表单验证

2条答案

相关问题

热门标签

最新问答