主页 / coding / 问题 / 77852498
Accepted
PixelPaul
Asked: 2024-01-21 03:51:57 +0800 CST

ReactJs 和 React-Hook-Form：仅在选择特定选择列表选项时显示文本输入

  • 772

我正在与ReactJs和合作React-Hook-Form。我有一个包含精选汽车品牌列表的组件。当组件最初呈现时，我希望选择列表选项默认为 value Other，并有一个文本输入显示，以便用户可以输入选择列表中不存在的品牌。如果用户从选择列表中选择现有品牌，则应隐藏文本输入。这是我的代码：

export default function Test() {
    
    type Car = {
        brandId: number,
        brand: string
    }

    const defaultBrandId = 5; // 'Other'
    const [showBrandInput, setShowBrandInput] = useState<boolean>(true);
    const { register, handleSubmit, setValue, getValues, watch} = useForm<Car>();

    useEffect(() => {
        fetchCarBrands();
    }, [])

    useEffect(() => {
        setShowBrandInput(getValues().brandId === defaultBrandId);
    }, [watch('brandId')]);

    function fetchCarBrands() {
        // API call to get select list data
        // Set default select list value to 'Other'
        setValue("brandId", defaultBrandId);
    }

    function onSubmit() {
        alert("form submitted");
    }

    return (
        <>
            <Form onSubmit={handleSubmit(onSubmit)} noValidate>
                <Div className="mb-4">
                    <FormLabel>Brand</FormLabel>
                    <Row>
                        <Col>
                            <Form.Select {...register("brandId")}>
                                <option value="1">Chevy</option>
                                <option value="2">Ford</option>
                                <option value="3">Honda</option>
                                <option value="4">Toyota</option>
                                <option value="5">Other</option>
                            </Form.Select>
                        </Col>
                        <Col>
                            {showBrandInput &&
                                <Form.Control type="text" {...register("brand")} />
                            }
                        </Col>
                    </Row>
                </Div>
                <Button type="submit" className="btn-dk-blue">
                    Submit
                </Button>
            </Form>
        </>
    )
}

上面的代码最初正确呈现，并选择了默认选择列表值Other，并且文本输入可见。如果我随后从选择列表中选择不同的值，则文本输入将被隐藏。我的问题是，如果我随后从选择列表中重新选择Other，则不会显示文本输入。

reactjs

1 个回答

  1. Best Answer

    问题

    这是一个比较错误类型的简单例子。上面的代码尝试将字符串与数字进行比较，这就是它仅在加载时显示的原因。如果您在使用效果中将两者都转换为数字（或字符串），那么问题将得到解决。

    解决方案

    下面是您的代码的工作示例（使用一些修改过的 HTML，因为我没有与您相同的组件），两个变量都转换为整数以进行正确比较。

    有关更改及其原因的详细信息，请参阅本文底部。

    import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";

export default function CarList() {
  type Car = {
    brandId: number;
    brand: string;
  };

  const defaultBrandId = 5; // 'Other'
  const [showBrandInput, setShowBrandInput] = useState<boolean>(true);
  const { register, handleSubmit, setValue, getValues, watch } = useForm<Car>({
    defaultValues: { brandId: 5 },
  });
  const CurrentBrandID = watch("brandId");

  const onSubmit = (data: Car) => {
    console.log("form submitted with data:", data);
  };

  useEffect(() => {
    setShowBrandInput(+getValues().brandId === +defaultBrandId);
  }, [CurrentBrandID]);

  return (
    <>
      <form onSubmit={handleSubmit(onSubmit)} noValidate id="carForm">
        <div className="mb-4">
          <label>Brand</label>
          <div>
            <select {...register("brandId")}>
              <option value="1">Chevy</option>
              <option value="2">Ford</option>
              <option value="3">Honda</option>
              <option value="4">Toyota</option>
              <option value="5">Other</option>
            </select>
          </div>
          <div>
            {showBrandInput && <input type="text" {...register("brand")} />}
          </div>
        </div>
        <button type="submit" className="btn-dk-blue" form="carForm">
          Submit
        </button>
      </form>
    </>
  );
}

    变化：

    1. 现在的使用效果是检查数字 5 是否等于数字 ids。通过添加 + 符号，我们将它们转换为整数
    2. 重新排序了 useEffects 的位置，因为它们应该始终位于最后或它们使用或影响的功能之后
    3. 删除所需的 useEffect 和 setValue - 这应该通过 useForm对象完成defaultValue
    • 1

相关问题