在 React 中自动完成设置默认值

Question

我需要在我的 React 应用程序的自动完成中有一个默认值。我的问题是当我尝试提交它时，它仍然无效。这意味着它没有任何价值。我需要单击自动完成并再次 select 它才能获得值。

请检查此代码框 link CLICK HERE

          <Autocomplete
            name="member_status"
            value={values.member_status}
            options={memberStatuses ? memberStatuses : []}
            getOptionLabel={(memberStatus) => memberStatus.name}
            onChange={(e, value) => {
              setFieldValue(
                "member_status",
                value !== null ? value.id : ""
              );
            }}
            renderInput={(params) => (
              <TextField
                {...params}
                label="Member Status"
                name="member_status"
                variant="outlined"
                onBlur={handleBlur}
                helperText={
                  touched.member_status ? errors.member_status : ""
                }
                error={
                  touched.member_status && Boolean(errors.member_status)
                }
              />
            )}
          />

Answer 1

这里的问题是您将 Autocomplete 的初始值设置为 object，然后您正在验证 string。

将您的 validationSchema 更改为

const validationSchema = yup.object().shape({
  member_status: yup
    .object()
    .shape({
      id: yup.number(),
      name: yup.string()
    })
    .nullable()
    .required("Select member status")
});

和您的 Autocomplete 的 onChange 处理程序到

...
onChange={(e, value) => {
  setFieldValue("member_status", value); // set the new value to an object, not string
}}

应该可以。

在 React 中自动完成设置默认值

Autocomplete Set Default Value in React

javascript

reactjs

material-ui

yup

formik