在 React Material UI 中重置 AutoComplete答案

【问题标题】：Reset AutoComplete in React Material UI在 React Material UI 中重置 AutoComplete
【发布时间】：2021-05-07 11:14:48
【问题描述】：

当我选择 city_id 自动完成时，我需要重置 state_id。如何重置state_id？不清楚。

请在此处检查代码和框

CLICK HERE

代码

      <Autocomplete
        values={values.city_id}
        options={cities ? cities : []}
        getOptionSelected={(option, value) => option.id === value.id}
        getOptionLabel={(option) => option.name}
        onChange={(e, value) => {
          setFieldValue("city_id", value ? value : "");
          setFieldValue("state_id", "");
        }}
        renderInput={(params) => (
          <TextField
            name="city_id"
            fullWidth
            label="City"
            variant="outlined"
            onBlur={handleBlur}
            helperText={touched.city_id && errors.city_id}
            error={touched.city_id && Boolean(errors.city_id)}
            {...params}
          />
        )}
      />

【问题讨论】：

标签： reactjs react-hooks material-ui formik

【解决方案1】：

看起来一个错字是它没有按预期工作的原因。你应该写 value={values.state_id} 而不是 values={values.state_id} 作为自动完成的道具。

顺便说一句，对于这类事情（“如果 fieldB 发生变化，请在 fieldA 中执行某些操作”），我们在我的项目中基于 https://github.com/formium/formik/issues/1633#issuecomment-520121543 构建了一个组件。这与 https://github.com/jaredpalmer/formik-effect 的 API 很接近，但仍然值得自己实现它，因为在过去 3 年中没有致力于 jaredpalmer/formik-effect。

【讨论】：

非常感谢。会去看看