如何避免对清除文本字段中的值进行验证答案

【问题标题】：How to avoid validation on clearing values from the textfield in react如何避免对清除文本字段中的值进行验证
【发布时间】：2023-02-22 02:33:25
【问题描述】：

我有一个关于输入验证的问题。我将 Fabric UI 用于文本字段，其中包含我用来验证输入的 onGetErrorMessage。文本字段是受控元素。一切正常，除了有那么一刻，当我重置/清除字段时，它触发了验证，然后我收到错误消息，说不能为空，由于验证，这很好，但如果我们正在谈论重置。

我将在此处发布我使用的部分代码。

const els: React.ReactElement[] = [];

els.push(<ChoiceGroup label = "Choice" selectedKey = {student.Choice} options = {choices} onChange = {(e: any, selectedItem: any) => ...} />);

    els.push(<TextField label='Name' required value = {student.Name} onChange = {(e: any, value: any) => ....} validateOnLoad = {false} 
        onGetErrorMessage = {(value: string) => validate('Name', value, els)} />);
    els.push(<TextField key='Age' label="Age" required value = {student.Age} onChange = {(e: any, value: any) => ..} validateOnLoad = {false}
        onGetErrorMessage = {(value: string) => validate('Age', value, els)} />);

我们有显示的 3 个元素，现在在选择更改时，我需要清除文本字段，我按如下方式进行操作：

useEffect(() => {
        // I modify the state here, and set Age and Name of the student object to ''
        // which triggers then onGetErrorMessage

    }, [student.Choice]);

在不触发验证的情况下重置文本字段值的最佳方法是什么，但是当用户手动清除文本字段（使其为空）时，这仍然必须起作用

任何想法？我将不胜感激....坚持了一段时间......

【问题讨论】：

当这些组件首次呈现时，最初是否也会触发该错误消息？
通常是的，但不是这个 validateOnLoad = {false}
我只是想保持相同的行为 onLoad 和清除它不应该显示错误......也许我需要重新创建这些字段......我不知道我最好做什么 tbh：/
你检查答案了吗？

标签： reactjs validation react-hooks fluentui-react

【解决方案1】：

由于您解释了 validateOnLoad 的行为，您可以提供钥匙到您的文本字段：

<TextField label='Name' key={uniqueKey} required value = {student.Name} onChange = {(e: any, value: any) => ....} validateOnLoad = {false} 
        onGetErrorMessage = {(value: string) => validate('Name', value, els)} />

现在，当你清除useEffect里面的Age和Name时，你也可以再生每个文本字段的键。密钥应该是唯一值，如 UUID。这将使 react 卸载每个 Textfield 的先前实例并再次安装它 - 这将为您提供与最初创建每个文本字段时相同的行为。

密钥最初应该生成一次，并且当您想要清除这些文本字段时，还要确保在 useEffect 中重新生成这些密钥，而不是在每次重新渲染时在渲染中重新生成这些密钥（请参见下面的示例）。

例子：

import React from 'react';
import './style.css';

// Using this function for this example, not sure if this is the safest way to generate uuidv4
function uuidv4() {
  return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
    (
      c ^
      (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
    ).toString(16)
  );
}

export default function App() {
  let [a, setA] = React.useState(uuidv4());
  let [b, setB] = React.useState(uuidv4());
  let [test, setTest] = React.useState(0);

  React.useEffect(() => {
    setA(uuidv4());
    setB(uuidv4());
  }, [test]);
  return (
    <div>
      <input key={a}></input>
      <input key={b}></input>
      <button
        onClick={() => {
          setTest(test + 1);
        }}
      >
        click
      </button>
    </div>
  );
}

在输入中输入一些东西
点击按钮
查看输入值是如何被清除的，因为 React 重新生成了那些文本字段（并且由于此示例使用不受控制的输入，因此它们的值也被清除）。

【讨论】：