如何在React Hooks中应用输入验证

Question

我是ReactJS Hooks的新手。我搜索了一个清晰的受控表单验证示例，但没有得到。所以我决定写一个简单的问题，任何人都可以很容易地理解

假设我有两个输入字段，类型number和类型text

const [values, set_values] = useState({first_input:'',second_input:''});
const handle_change = (e) => {
let name = e.target.name
let value = e.target.value;
values[name] = value;
set_values(values);
}
const test_validation () => {
// I used to do it this way
if(document.getElementsByName('first_input')[0].value==''){
alert("first input is required")
}
}
return(
<div>
<input onChange={handle_change} name='first_input' type='number' />
<input onChange={handle_change} name='second_input' type='text' />
<input type='submit' onClick={test_validation} />
<div/>
)

使用纯JS检查输入的值和设置条件是错误的，还是首选使用React验证表单？

我试图在输入元素标记上设置required属性，这样就不能跳过它，但没有成功。

我需要为所需的文件或上面的highlight或focus发送alert()警告消息。

Answer 1

首先，您的更新函数并没有真正正常工作。

试试这个：

const handle_change = (e) => {
let name = e.target.name
let value = e.target.value;
set_values({ ...values, [name]: value });
}

那么，这里更好的做法是使您的<input />元素受控于组件。

例如，对于first_input，这样做：

<input onChange={handle_change} name='first_input' type='number' value={values.first_input} />

然后你的验证可能看起来像这样：

const test_validation () => {
if(values.first_input === ''){
alert("first input is required")
}
}

当value仍然是空字符串时，这应该会成功触发您希望的alert。

Answer 2

您在handle_change函数中更新输入值的方法是错误的。值是一个常量，不能直接修改。使用带有set_values的ES6排列运算符来更新值。

set_values({...values, [name]:value});

Answer 3

下面是一个关于如何处理验证的最小示例：

大多数时候，您不需要使用React直接操作DOM API。此外，请确保在验证时执行e.preventDefault，否则事件将由于冒泡而传播

import React, { useState } from "react";
export default function App() {
const [values, setValues] = useState({ numberInput: "", textInput: "" });
const validation = e => {
if (values.numberInput === '' || !values.textInput) {
e.preventDefault();
alert("numberInput and textInput are required");
}
};
return (
<div>
<form
onSubmit={e => {
e.preventDefault();
alert("submit ");
}}
>
<input
onChange={({ target }) => setValues({ numberInput: target.value })}
name="numberInput"
type="number"
/>
<input
onChange={({ target }) => setValues({ textInput: target.value })}
name="textInput"
type="text"
/>
<input type="submit" onClick={validation} />
</form>
</div>
);
}