Question

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

我在做什么-

我有一个下拉菜单，其中有一个数字作为下拉菜单，例如1,2,3,4
因此，哪个下拉菜单用户都在选择我要创建那么多输入字段
如果用户选择3则3个输入字段

我想要实现的是

当用户创建两个输入字段时，我不希望它们都具有相同的输入。
就像第一个输入以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，以使fname的两个输入字段不应具有相同的输入。

Code sandbox link

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

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

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

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

1 个答案: