如何从json道具在react输入组件中设置动态属性

zvms9eto  于 2021-09-13  发布在  Java
关注(0)|答案(1)|浏览(293)

我使用了可重用的输入组件,并将json属性作为道具发送到输入组件,当我在组件中使用它时,它只显示json数组中的一个属性。
形式:

<InputField value={allValues.new_password}
                  name="new_password"
                  type="password"
                  placeholder="Enter New Password"
                  required={true}
                  id="new_password"
                  onChange={handleChange("new_password")}
                  attributes={[
                    {
                      name: "data-parsley-equalto",
                      value: "#confirm_password"
                    },
                    {
                      name: "data-parsley-errors-container",
                      value: "#password-errors"
                    }
                  ]}
                />

输入组件中的

for (let i = 0; i < props.attributes.length; i++) {
        var attr_name = props.attributes[i].name;
        var attr_value = props.attributes[i].value;
        setAttributes({
          ...attributes,
          [attr_name]: "" + attr_value + ""
        });
      }
    }
<input
          type={type}
          value={value}
          className="form-control"
          placeholder={placeholder}
          onChange={handleChange}
          name={name}
          id={id}
          required={required}
          {...attributes}
        />

当我检查时,它只显示一个属性

<input type="password" class="form-control" placeholder="Please Confirm password" name="confirm_password" id="confirm_password" required="" value="" data-parsley-errors-container="#confirm_password-errors">

有人帮我解决这个问题吗?

mftmpeh8

mftmpeh81#

似乎您错过了循环中迭代属性的相等性;

for (let i = 0; i <= props.attributes.length; i++) {
...

相关问题