想用onChange检查Input的pattern内部function的工作方法

Question

我想知道 function 在 HTML 的“输入”标签中返回“真”和“假”。

我只是在 Input 中添加了模式和 onChange，但是，它返回 true 或 false。 此外，我需要连接它，尤其是 useState 的返回值部分并连接到其他验证检查函数。

谁能告诉我在哪里可以找到 HTML 的这个 function 作品？

• 同样，我想知道输入的模式 function 的工作方式，并希望看到 HTML 中的内部 function，它只适用于设置模式

谢谢

const inputs = [
{
      id: 1,
      name: "name",
      type: "text",
      placeholder: "이름을 입력해 주세요.",
      errorMessage: "이름은 두글자 이상입니다.",
      label: "이름",
      pattern: `^[가-힣]{2,4}$`,
      required: true,
    },
    {
      id: 2,
      name: "id",
      type: "text",
      placeholder: "id",
      errorMessage: "ID는 최소 4자 이상, 영문과 숫자만 사용할 수 있습니다.",
      label: "아이디",
      required: true,
    },
    .
    .
    .]

const {
    label,
    errorMessage,
    onChange,
    inputRef,
    id,
    pattern,
    ...inputProps
  } = props;

  const handleFocus = (e) => {
    setFocused(true);
  };

  return (
    <div className='formInput'>
      <label>{label}</label>
      <input
        {...inputProps}
        onChange={onChange}
        onBlur={handleFocus}
        onFocus={() =>
          inputProps.name === "confirmPassword" && setFocused(true)
        }
        focused={focused.toString()}
      />
      <span>{errorMessage}</span>
    </div>
  );
};

Answer 1

请添加您的 onChange function 以便我们查看代码中发生的情况。

如果您愿意，可以在输入中指定 onClick ，如下所示：

// the below function logs out event passsed to it
const onChange = (event) => console.log(event)

// later in the code:
<input onChange={(event) => onChange(event)} />

您不能简单地通过 function，因为它会在每次安装组件时运行，而不是在特定事件上运行。 要实现调用 function 以响应事件，请将其包装在箭头 function 中，如上所述。