在 React 中重置自动完成 Material UI

Question

当我 select city_id 自动完成时，我需要重置 state_id。如何重置 state_id？它没有清除。

请在此处检查代码和框

代码

      <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}
          />
        )}
      />

Answer 1

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

顺便说一句，对于这类事情（“如果 fieldB 发生变化，则在 fieldA 中做一些事情”）我们基于 https://github.com/formium/formik/issues/1633#issuecomment-520121543 in my project. This is close to the API of https://github.com/jaredpalmer/formik-effect 构建了一个组件，但仍然值得自己实现它，因为 jaredpalmer/formik-effect最近3年没有承诺过

在 React 中重置自动完成 Material UI

Reset AutoComplete in React Material UI

reactjs

material-ui

formik

react-hooks