Início / coding / Perguntas / 77852498
Accepted
PixelPaul
Asked: 2024-01-21 03:51:57 +0800 CST

ReactJs e React-Hook-Form: exibe entrada de texto somente quando uma opção específica da lista de seleção é selecionada

  • 772

Estou trabalhando com ReactJse React-Hook-Form. Tenho um componente com uma lista selecionada de marcas de automóveis. Quando o componente for renderizado inicialmente, quero que a opção da lista de seleção tenha como padrão o valor Othere tenha uma exibição de entrada de texto para que o usuário possa inserir uma marca que não esteja presente na lista de seleção. Se o usuário selecionar uma marca existente na lista de seleção, a entrada de texto deverá ser ocultada. Aqui está o meu código:

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

O código acima é renderizado inicialmente corretamente com o valor da lista de seleção padrão Otherselecionado e a entrada de texto fica visível. Se eu selecionar um valor diferente na lista de seleção, a entrada de texto ficará oculta. Meu problema é que se eu selecionar novamente Otherna lista de seleção, a entrada de texto não será exibida.

reactjs

1 respostas

  1. Best Answer

    Problema

    este é um caso simples de comparação de tipos errados. O código acima está tentando comparar uma string com um número e é por isso que ela só aparece durante o carregamento. Se você converter ambos como números em seu efeito de uso (ou como strings), o problema será resolvido.

    Solução

    Abaixo está um exemplo funcional do seu código (com algum HTML modificado, já que não tenho os mesmos componentes que você) com ambas as variáveis ​​convertidas como números inteiros para comparação correta.

    Para obter detalhes sobre as alterações e por que foram feitas, consulte o final desta postagem.

    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>
    </>
  );
}

    Mudanças:

    1. O efeito de uso agora verifica se o número 5 é igual a ids como um número. adicionando o símbolo +, estamos convertendo-os em números inteiros
    2. posicionamento reordenado de useEffects , pois eles sempre devem vir por último ou depois das funções que usam ou afetam
    3. Remova useEffect e setValue necessários - isso deve ser feito por meio do objeto useFormdefaultValue
    • 1

relate perguntas