小编aad*_*dlc的帖子

阿门德

我有一个使用 Material UI、react-hook-from 的表单，是的。

该表单具有三组无线电组（例如：radio-g1、radio-g2、radio-g3），并且用户必须从 radio-g1、radio-g2 中至少选择两个选项。此外，如果他们从 radio-g2 中选择“其他”选项，则会显示另一个必填字段 radio-g3。

最后，radio-g3 在隐藏时不是强制性的。

任何帮助将不胜感激。这是一些示例代码：

const schema = yup.object().shape({
  radioG1: yup.string().required("Please select an Avenger"),
  radioG2: yup.string().required("Please select an Avenger"),
  radioG3: yup.string().required("Please select an Avenger")
});

const App = () => {
  const [show, setShow] = useState(false);

  const methods = useForm({
    mode: "all",
    shouldUnregister: true,
    resolver: yupResolver(schema)
  });

  const {
    handleSubmit,
    control,
    formState: { errors }
  } = methods;

  const onSubmit = (data) => {
    alert(JSON.stringify(data));
  };

  return (
    <FormProvider {...methods}>
      <form …

我想用显示错误yup，并react-hook-form当用户选择超过5个复选框没有成功。

相反，选择第七个复选框时会显示错误。

这是简化的代码：

imports...

const schema = yup.object().shape({
  option: yup.array().max(5)
});
function App() {
  const { register, handleSubmit, errors } = useForm({
    mode: "onBlur",
    resolver: yupResolver(schema)
  });

  const [state, setState] = useState({
    wasSubmitted: false
  });

  const submit = async (data) => {
    window.alert(JSON.stringify(data));
  };

  if (state.wasSubmitted) {
    return <p>Congrats</p>;
  } else {
    return (
      <>
        <CssBaseline />
        <Container maxWidth="sm">
          <Typography variant="h2" component="h1">
            My form
          </Typography>
          <form noValidate autoComplete="off" onSubmit={handleSubmit(submit)}>
            <FormControl
              component="fieldset"
              error={!!errors.option}
            >
              <FormLabel component="legend">
                Please …

我有以下组件作为control参数：

const TexInputMUI = (props) => {
  const { control, variant, margin, ...rest } = props
  return (
    <Controller
      name='myMUItf'
      defaultValue=''
      control={control}
      render={({ field }) => (
        <TextField
          {...field}
          variant={variant}
          margin={margin}
          label='A simple MIU text field'
          {...rest}
        />
      )}
    />
  )
}

而且，我有一个简单的测试想要检查组件是否呈现

test("Render text input without crashing", () => {
   const { getByLabelText } = render(<TextInputMUI control={}/>);
   const textField = getByLabelText(/A simple MIU text field/);
});

现在的问题是我不知道如何在测试中将控制作为参数传递。

有人可以帮忙吗？

我有一个使用 Material UI 和 React-hook-form 的多步骤 (2) 表单。第一步，我要求输入字符串(Q1)和地址(Q2)。然后，用户单击“下一步”进入第二步。

此时，我使用 React context 将数据保存在全局状态中，并将其值传递到表单上的步骤 2，但是只有 Q1 的值被正确保存。Q2 的值保存为undefined.

简化代码

第 1 步页面

//imports here
const StepOne= () => {
  const { setValues } = useData();

  const methods = useForm({
    mode: "all",
    shouldUnregister: true
  });

  const { handleSubmit, control } = methods;

  const history = useHistory();

  const onSubmit = async (data) => {
    setValues({ address: data.address, other: data.other });
    history.push("/step2");
  };

  return (
    <MainConatiner>
      <Typography variant="h4" component="h2" …