如何在reactjs中保留表单向导选中的下拉列表值？

Question

我有这个多级表单向导。当我单击下一步按钮并返回到上一阶段时，所选的下拉列表值已被重置。 （子类别）

从主类别选择中填充子类别字段数据。

子类别代码：

<TextField
    select
    className={clsx('SelectMenu', styles.SelectMenu)}
    SelectProps={{ displayEmpty: true }}
    onChange={(e) => (
        setSubCategory(e.target.value),
        handleValChange("subCategory", e.target.value) //formik set value
    )}
>

<MenuItem value={"Select"} disabled>Select</MenuItem>
    {selectedMainCat[0] && selectedMainCat[0].subCategory.map((data, i) => (
        <MenuItem key={i} value={data.name}>{data.name.toUpperCase()}</MenuItem>
    ))}
</TextField>

Answer 1

谢谢@Neo。我通过将状态

const [subCategory, setSubCategory]: any = useState('');

作为渲染组件的道具添加来解决了该问题。

<Features setSubCategory={setSubCategory} subCat={subCategory}/>

const Features = ({ setSubCategory, subCat }: Props) => {

   ....
   <MenuItem value={subCat} selected>{subCat}</MenuItem>
}