如何使用一些自定义验证来验证反应输入字段

Question

我正在使用 react 并动态创建一些新的输入字段，并使用React-gook-form进行验证。

我正在做的是——

1. 我有一个下拉列表，其中有数字作为下拉列表，例如 1,2,3,4
2. 所以哪个下拉用户正在选择我正在创建那么多的输入字段
3. 如果用户选择 3 然后 3 个输入字段

我想要实现的是

1. 当用户创建两个输入字段时，我不希望它们都具有相同的输入。
2. 如果第一输入具有d作为输入像然后第二个不应该采取D在第二个。

PS-这里只是为了最少的代码，我只创建了一组输入，比如名字

可以是当我选择 2 时，我可以创建两组输入，每组中都有 Fname 和 Lname，这样两个 fname 都不应该采用相同的值，lname 也是如此。

我做了什么

这一个保持状态，选择初始一个并创建一个输入。

const [initialSet, setinitialSet] = useState(1);

在选择更改时执行此操作

    const Select_change = (e) => {
    let val = parseInt(e.target.value);
    setinitialSet(val);
  };

现在使用该初始状态循环我的元素以创建输入字段

<div className="row">
      {[...Array(initialSet).keys()].map((li, index) => (
        <div className="col-12 col-sm-12 col-md-8 col-lg-4 col-xl-4">
          <div className="form-group">
            <input
              type="text"
              name={`data[${index}].name`}
              id={"name" + index}
              className="form-control"
              placeholder="F Name"
              ref={register({ required: `F name ${index} is required` })}
            />
            <label" htmlFor={"name" + index}>
              F Name
            </label>
            {errors.data && errors.data[index] && errors.data[index].name && (
              <div>
                <span className="text-danger">
                  {errors.data[index].name.message}
                </span>
              </div>
            )}
          </div>
        </div>
      ))}
    </div>

现在我只想验证 fname 以便 f name 的两个输入字段不应具有相同的输入。

代码沙箱链接

我的代码沙箱中有完整的工作代码

Answer 1

您可以使用输入数组，因此当您选择 3 时，您将创建一个包含 3 个将包含数据的元素的数组。

const [initialSet, setinitialSet] = useState([]);

这是创建过程：

const Select_change = (e) => {
  let val = parseInt(e.target.value);
  setinitialSet( new Array(val));
}

如果需要，您可以选择将数组初始化为零

setinitialSet( new Array(val).fill(0) );

当您循环输入时，您将使用数组中元素的索引。 如果需要复杂的逻辑，您甚至可以在元素的每个元素中存储名称和错误。