reactjs - 如何进行字段验证？

Question

如何进行字段验证？

我有一个对象，其中包含我生成表单的字段，并且在提交时，我需要检查每个字段以使其不为空，我这样做了，但它不起作用

我的表格：

    const [volunteerData, setVolunteerData] = useState({
    fullName: {
      value: '',
      type: "text",
      placeholder: "Name",
      label: "Name"
    },
    phone: {
      value: '',
      type: "text",
      placeholder: "Phone number",
      label: "Phone number",
      mask: "[phone]"
    }
    )}

渲染形式：

const onHandleRenderForm = () => {
    return Object.keys(volunteerData).map((items, idx) => {
        const control = volunteerData[items];
        return (
            <div key={idx} className="content-data-box">
                <label>{control.label}</label>
                <InputMask 
                    type={control.type} 
                    placeholder={control.placeholder}
                    mask={control.mask}
                    onChange={e => onHandleFormData(e, items)}
                />
            </div>
        )
    })
};

onChange 输入：

const onHandleFormData = (e, items) => {
    const before = {...volunteerData};
    const after = {...before[items]}

    after.value = e.target.value;
    
    before[items] = after;
    setVolunteerData(before);
};

onClick（提交按钮）：

const onHandleErrorBoundary = () => {
    Object.keys(volunteerData).map(items => {
        const errorData = items.value === '';
        console.log(errorData)
    })
};

标签： reactjs

Answer 1

更改items.value === ''为volunteerData[items].value !== ""

const onHandleErrorBoundary = () => {
    Object.keys(volunteerData).map(items => {
      const errorData = volunteerData[items].value !== "";
      return console.log(errorData);
    });
};

你可以在这里查看代码和框