更新表单中的状态

Question

上下文：我希望用户在表单中选择一个选项。此选项应更新状态。

问题：确实可以，但仅在“选项”下有效，显示不是我想要的。

我尝试过的事情：我尝试在按钮中输入值和“ handlechange”，但按钮返回“未定义”状态。

代码：

表格：

import React, { useState } from 'react';
import Question1 from './projet/Question1';
import Question2 from './projet/Question2';

const Form = () => {
  const [data, setData] = useState({
    step: 1,
    question1: '',
    question2: '',
  });

  // Proceed to next step
  const nextStep = () => {
    setData({
      ...data,
      step: step + 1,
    });
  };

  // Go back to prev step
  const prevStep = () => {
    setData({
      ...data,
      step: step - 1,
    });
  };

  // Handle fields change
  const handleChange = (input) => (e) => {
    setData({ ...data, [input]: e.target.value });
  };

  const { step } = data;
  const { firstName, lastName, email, occupation, city, bio } = data;
  const values = { firstName, lastName, email, occupation, city, bio };

  switch (step) {
    case 1:
      return (
        <div>
          <Question1
            nextStep={nextStep}
            handleChange={handleChange}
            values={values}
          />
        </div>
      );
    case 2:
      return (
        <div>
          <Question2
            nextStep={nextStep}
            prevStep={prevStep}
            handleChange={handleChange}
            values={values}
          />
        </div>
      );
    case 3:
      return null;
    case 4:
      return null;
    default:
      console.log('This is a multi-step form built with React.');
      return null;
  }
};

export default Form;

组件问题1：

import React from 'react';
import styled from 'styled-components';

function Question1({ values, handleChange, nextStep }) {
  return (
    <StyledForm>
      <form>
        <div className="form container-fluid pb-5">
          <div className="row-cols-12 p-5 text-center">
            <h1>Quel est votre projet ?</h1>
          </div>
          <div className="row text-center">
            <div className="col-10 col-sm-5 col-lg-2 px-0 formCard mb-5 text-center mx-auto">
              <option
                type="submit"
                value="goooo"
                onClick={handleChange('question1')}
              >
                <img
                  className="col-12 p-0"
                  src="img/form/question1/acheterunbien.png"
                  alt="acheter un bien"
                />

                <p className="my-auto py-2">Acheter un bien</p>
              </option>
            </div>

            <div className="col-10 col-sm-5 col-lg-2 px-0 formCard mb-5 text-center mx-auto">
              <img
                className="col-12 p-0"
                src="img/form/question1/faireconstruire.png"
                alt="faire construire"
              />
              <p className="my-auto py-2">Faire construire</p>
            </div>
            <div className="col-10 col-sm-5 col-lg-2 px-0 formCard mb-5 text-center mx-auto">
              <img
                className="col-12 p-0"
                src="img/form/question1/fairedestravaux.png"
                alt="faire des travaux"
              />
              <p className="my-auto py-2">Faire des travaux</p>
            </div>
            <div className="col-10 col-sm-5 col-lg-2 px-0 formCard mb-5 text-center mx-auto">
              <img
                className="col-12 p-0"
                src="img/form/question1/renegocier.png"
                alt="renegocier"
              />
              <p className="my-auto py-2">Renégocier</p>
            </div>
            <div className="col-10 col-sm-5 col-lg-2 px-0 formCard mb-5 text-center mx-auto">
              <img
                className="col-12 p-0"
                src="img/form/question1/autresprojets.jpg"
                alt="autres projets"
              />
              <p className="my-auto py-2">Autres projets</p>
            </div>
          </div>
        </div>
      </form>
    </StyledForm>
  );
}

export default Question1;