反应材料-UI形式组件

Question

我有一个问题，我无法从formcontent组件中获取数据值。你能帮我吗您会找到codesandbox链接

Answer 1

您需要将应用程序（root component）与appContext提供商包装。

1. 将AppContext从formcontent移动到app组件，并使用您想要的值和设置和其他功能创建上下文。

export const AppContext = createContext({
  activeStep: 0,
  values: [],
  handleFormChange() {},
  handleNext() {},
  handleBack() {}
});

export default function App() {
  const [values, setValues] = useState({
    nni: "",
    nom: "",
    prenom: "",
    email: "",
    typeHabilitation: "",
    perimetreHabilitation: ""
  });

  return (
    <AppContext.Provider value={{ values, setValues }}>
      <Form />
    </AppContext.Provider>
  );
}

2. 现在，在两个formulairairevalidation和摘要组件中使用此上下文。

export default function formulaireValidation({ submitForm }) {
   ...
   ...
  const { values, setValues } = useContext(AppContext);
  ...
  ...

}

export default function SummaryForm(props) {
  const { values, handleBack, handleNext } = useContext(AppContext);
  ...
  ...
}

工作demo