如何在 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 属性，所以它不能被跳过但没有工作。

我需要alert() 警告消息以获取所需文件或highlight 或focus。

Answer 1

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

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

Answer 2

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

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

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>
  );
}

Answer 3

首先，您的更新功能并没有真正发挥应有的作用。

试试这个：

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。