javascript - 在 ReactJS Hook 中的表单内单击时添加更多输入

Question

我的 React 应用程序内部存在一些问题，目前我使用 Hook 在 ReactJS 中构建了一个多步骤，但我对这项技术还是新手。问题是：当我在表单中添加输入并传递到下一步时，数据丢失了。我可以解决谁？

为了比我的尝试更合理地重新开始，我没有将生成输入的代码提供给您，因为我知道如果我进入下一步，它不会保留数据。

表单.js

const [formData, setFormData] = useState({
    stepOne: {
        lastName: {
            value: '',
            required: true,
            type: 'input',
            placeholder: 'Nom du client',
            label: 'Nom*',
            classField: 'col-lg-6'
        }
    },
    stepTwo: {
        quantity: {
            value: '',
            required: true,
            type: 'input',
            placeholder: '3',
            label: 'Quantité*',
            classField: 'col-lg-2'
        }
    },
    stepThree: {
        origine: {
            value: '',
            required: true,
            type: 'input',
            placeholder: 'Sélectionnez l\'origine',
            label: 'Origine*',
            classField: 'col-lg-6'
        }
    },
});
const [errors, setErrors] = useState(1);

const changeHandler = (step, e) => {
    e.persist();

    setFormData(prev => ({
        ...prev,
        [step]: {
            ...prev[step],
            [e.target.name]: {
                ...prev[step][e.target.name],
                value: e.target.value
            }
        }
    }));
}

const stepChangeHandler = (values, e) => {

    e.preventDefault();
    const newErrors = validate(values);

    setErrors(newErrors);
    if (Object.keys(newErrors).length === 0) {
        setStep(step + 1);
    }
}


const submitHandler = (e) => {
    e.preventDefault();

    const data = new FormData();
    // Nous pouvons envoyer la donnée à une API
    console.log(formData);
}

Step.js

const Step = ({data, onChange, onStepChange, errors, stepKey, step, onPrevStep}) => {
let output = [];

for (const [key, val] of Object.entries(data)) {
        if (val.type.split(':')[0] === 'input') {
            output.push(
                <Input
                    key={key}
                    placeholder={val.placeholder}
                    name={key}
                    label={val.label}
                    classField={val.classField}
                    value={val.value}
                    onChange={(e) => onChange(stepKey, e)}
                    error={errors[key]}
                    type={val.type.split(':')[1]}
                />
            );
        } else if (val.type === 'select') {
            output.push(
                <Select
                    key={key}
                    name={key}
                    label={val.label}
                    classField={val.classField}
                    value={val.value}
                    onChange={(e) => onChange(stepKey, e)}
                    error={errors[key]}
                    choices={val.choices}
                />
            );
        } else if (val.type === 'date') {
            output.push(
                <Date
                    key={key}
                    name={key}
                    label={val.label}
                    classField={val.classField}
                    value={val.value}
                    onChange={(e) => onChange(stepKey, e)}
                    error={errors[key]}
                    type={val.type.split(':')[1]}
                />
            );
        } else if (val.type === 'checkbox') {
            output.push(
                <Checkbox
                    key={key}
                    name={key}
                    label={val.label}
                    classField={val.classField}
                    value={val.value}
                    onChange={(e) => onChange(stepKey, e)}
                    error={errors[key]}
                    type={val.type.split(':')[1]}
                />
            );
        }
}

return (
    <Fragment>
        {step > 1 &&
        <button type="button" className="previousStepButton" onClick={() => onPrevStep(step - 1)}>Étape
            précédente</button>}
        {output}
        <div className="col-lg-12">
            <button type="button" className="btn-step nextStepButton"
                    onClick={(e) => onStepChange(data, e)}>Étape suivante
            </button>
        </div>
    </Fragment>
);

}

输入.js

const Input = ({
    type = 'text',
    placeholder, name, value, onChange, error, label, classField, disabled
}) => {
    return (
        <div className={classField}>
            <div className="inputBox">
                <label htmlFor={name} className={error ? "labelField is-danger" : "labelField"}>{label}</label>
                <input
                    className={error ? "inputField is-danger" : "inputField"}
                    type={type}
                    placeholder={placeholder}
                    name={name}
                    id={name}
                    value={value}
                    onChange={onChange}
                    autoComplete="off"
                />
                {error && <div className="has-text-danger-dark">{error}</div>}
            </div>
        </div>
    );
}

标签： javascriptreactjsreact-hooks