Question

使用 onChange 进行 React 输入验证

2022-07-13

1633

javascript reactjs forms validation input

我有一个数字输入，我想用 onChange 来验证它，但是当所述输入被清除时，React 会抛出 ReferenceError: value is not defined ，这是可以理解的 - 它没有什么可验证的。

我正在使用这种方法 [答案]

我正在使用功能组件，这是我的代码片段：

const [formData, setFormData] = React.useState({
        userTeamChosen: "",
        eventNumber: 0,
        value: 0,
        ethValue: 0})

    function handleNumeric(event) {
        const { name, checkedValue, min, max } = event.target
        value = Math.max(Number(min), Math.min(Number(max), Number(value)));
        setFormData(prevFormData => {
            return {...prevFormData,[name]: checkedValue}})}

    <input
        type="number"
        name="value"
        value={formData.value}
        onChange={handleNumeric}
        min="5"
        max="10000000"/>

当输入为空时，我应该如何更改我的验证，以保留在 onChange 中，但不出错？提前致谢！

Answer 1

数字 input 元素中没有 checkedValue 属性，请改用 valueAsNumber 或 value 。

function handleNumeric(event) {
    const { name, valueAsNumber, min, max } = event.target
    const result = Math.max(+min, Math.min(+max, !Number.isNaN(valueAsNumber) ? valueAsNumber : +min));
    setFormData(prevFormData => {
        return {...prevFormData,[name]: result}})}

Answer 2

看起来你已经接近自己解决这个问题了 :D

我注意到的唯一错误是值变量没有在任何地方声明或定义，为了解决这个问题，我刚刚添加了 formData 以便 react 知道它是 formData 的值正在使用而不是一些随机值

function handleNumeric(event) {
    const { name, checkedValue, min, max } = event.target
    formData.value = Math.max(Number(min), Math.min(Number(max), Number(formData.value)));
    setFormData(prevFormData => {
        return {...prevFormData,[name]: checkedValue}})}

Answer 3

您应该拨打

function handleNumeric(event) {
        const { name, checkedValue, min, max } = event.target
        formData.value = Math.max(Number(min), Math.min(Number(max), Number(formData.value)));
        setFormData(prevFormData => {
            return {...prevFormData,[name]: checkedValue}})}