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

Question

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

请检查此代码框链接点击这里

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

应该管用。