是的，有条件使用“ when”和无线电输入

如何解决是的，有条件使用“ when”和无线电输入

我不确定自己在做什么错（可能是愚蠢的事情）。我正在将React Hook Form与Yup一起使用，并尝试根据检查无线电组的方式来确定条件。

基本上，如果您选中 first 收音机，则仅需要一个字段。 但是，如果您选中 second 单选，则需要两个文本字段。

我认为我以某种方式弄乱了validationSchema，但是看不到它。

import React,{ useState } from "react";
import { useForm } from "react-hook-form";
import * as yup from "yup";
import "./styles.css";

export default function App() {
  const validationSchema = yup.object().shape({
    decide: yup.string(),one: yup.string().required(),two: yup.string().when("decide",{
      is: "decideBoth",then: yup.string().required(),otherwise: yup.string().notRequired()
    })
  });

  const { register,handleSubmit,errors } = useForm({ validationSchema });

  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
    const { value } = event.target;
    setDecide(value);
  }

  const [decide,setDecide] = useState("decideOne");
  return (
    <div className="App">
      <form onSubmit={handleSubmit(console.log)}>
        <div>
          <input
            type="radio"
            name="decide"
            id="decideOne"
            value="decideOne"
            checked={decide === "decideOne"}
            onChange={handleChange}
          />
          <label htmlFor="decideOne">only one required</label>
          <input
            type="radio"
            name="decide"
            id="decideBoth"
            value="decideBoth"
            checked={decide === "decideBoth"}
            onChange={handleChange}
          />
          <label htmlFor="decideBoth">both required</label>
        </div>
        <div>
          <label htmlFor="one">one</label>
          <input ref={register} type="text" name="one" />
          {errors.one && <p>{errors.one.message}</p>}
        </div>
        <div>
          <label htmlFor="two">two</label>
          <input ref={register} type="text" name="two" />
          {errors.two && <p>{errors.two.message}</p>}
        </div>
        <button type="submit">submit</button>
      </form>
    </div>
  );
}

这里是https://codesandbox.io/s/musing-beaver-dce80?file=/src/App.tsx

的链接

解决方法

您需要将register传递到单选按钮的ref回调中。
这是工作代码。另外，我已经为useState删除了decide，因为它将由react-hook-form处理。

import React,{ useState } from "react";
import { useForm } from "react-hook-form";
import * as yup from "yup";
import "./styles.css";

export default function App() {
  const validationSchema = yup.object().shape({
    decide: yup.string(),one: yup.string().required(),two: yup.string().when("decide",(val,schema) => {
      console.log("when",val);
      if (val === "decideBoth") return yup.string().required();
      else return yup.string().notRequired();
    })
  });

  const { register,handleSubmit,errors,getValues } = useForm({
    validationSchema,defaultValues: {
      decide: "decideOne"
    }
  });

  const onSubmit = (data) => {
    console.log("On Submit",data);
  };

  return (
    <div className="App">
      <form onSubmit={handleSubmit(onSubmit)}>
        <div>
          <input
            ref={register}
            type="radio"
            name="decide"
            id="decideOne"
            value="decideOne"
            defaultChecked={getValues("decide") === "decideOne"}
            // onChange={handleChange}
          />
          <label htmlFor="decideOne">only one required</label>
          <input
            ref={register}
            type="radio"
            name="decide"
            id="decideBoth"
            value="decideBoth"
            defaultChecked={getValues("decide") === "decideBoth"}
            // onChange={handleChange}
          />
          <label htmlFor="decideBoth">both required</label>
        </div>
        <div>
          <label htmlFor="one">one</label>
          <input ref={register} type="text" name="one" />
          {errors.one && <p>{errors.one.message}</p>}
        </div>
        <div>
          <label htmlFor="two">two</label>
          <input ref={register} type="text" name="two" />
          {errors.two && <p>{errors.two.message}</p>}
        </div>
        <button type="submit">submit</button>
      </form>
    </div>
  );
}

这是沙箱：https://codesandbox.io/s/distracted-jackson-l14hj?file=/src/App.tsx