Блог

У меня есть несколько проблем внутри моего приложения React, в настоящее время я создаю многоступенчатый интерфейс для in ReactJS с помощью Hook, но я новичок в этой технологии. Проблема в следующем : когда я добавляю входные данные в свою форму и перехожу к следующему шагу, данные теряются. С кем я могу это исправить ?

Чтобы начать все сначала на более разумной основе, чем мои попытки, я не стал передавать вам код, который генерирует входные данные, зная, что он не сохранит данные, если я перейду к следующему шагу.

Form.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 amp;amp;
        <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>
);
 

}

Input.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 amp;amp; <div className="has-text-danger-dark">{error}</div>}
            </div>
        </div>
    );
}