1
resposta

Estou con dificuldades em integrar react-bootstrap form no meu aplicativo

Com react Hooks e Bootstrap fica dificil de entender onde posso obter os valores dos campos input. No onSubmit Handler passamos os event

const [validated, setValidated] = useState(false);

  const handleSubmit = event => {
    const form = event.currentTarget;
    if (form.checkValidity() === false) {
      event.preventDefault();
      event.stopPropagation();
    }

    setValidated(true);
  };

onde posso obter os valores de Email, password, name, etc...?

return (
    <Form noValidate validated={validated} onSubmit={handleSubmit}>
      <Form.Row>
        <Form.Group as={Col} md="4" controlId="validationCustom01">
          <Form.Label>First name</Form.Label>
          <Form.Control
            required
            type="text"
            placeholder="First name"
            defaultValue="Mark"
          />
          <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
        </Form.Group>
        <Form.Group as={Col} md="4" controlId="validationCustom02">
          <Form.Label>Last name</Form.Label>
          <Form.Control
            required
            type="text"
            placeholder="Last name"
            defaultValue="Otto"
          />
          <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
        </Form.Group>
        <Form.Group as={Col} md="4" controlId="validationCustomUsername">
          <Form.Label>Username</Form.Label>
          <InputGroup>
            <InputGroup.Prepend>
              <InputGroup.Text id="inputGroupPrepend">@</InputGroup.Text>
            </InputGroup.Prepend>
            <Form.Control
              type="text"
              placeholder="Username"
              aria-describedby="inputGroupPrepend"
              required
            />
            <Form.Control.Feedback type="invalid">
              Please choose a username.
            </Form.Control.Feedback>
          </InputGroup>
        </Form.Group>
      </Form.Row>
      <Form.Row>
        <Form.Group as={Col} md="6" controlId="validationCustom03">
          <Form.Label>City</Form.Label>
          <Form.Control type="text" placeholder="City" required />
          <Form.Control.Feedback type="invalid">
            Please provide a valid city.
          </Form.Control.Feedback>
        </Form.Group>
        <Form.Group as={Col} md="3" controlId="validationCustom04">
          <Form.Label>State</Form.Label>
          <Form.Control type="text" placeholder="State" required />
          <Form.Control.Feedback type="invalid">
            Please provide a valid state.
          </Form.Control.Feedback>
        </Form.Group>
        <Form.Group as={Col} md="3" controlId="validationCustom05">
          <Form.Label>Zip</Form.Label>
          <Form.Control type="text" placeholder="Zip" required />
          <Form.Control.Feedback type="invalid">
            Please provide a valid zip.
          </Form.Control.Feedback>
        </Form.Group>
      </Form.Row>
      <Form.Group>
        <Form.Check
          required
          label="Agree to terms and conditions"
          feedback="You must agree before submitting."
        />
      </Form.Group>
      <Button type="submit">Submit form</Button>
    </Form>
  )

Este é o exemplo do react-bootstrap...

Tenho a intenção de integrar com redux, mas a ultima versão que usava utilizava React.createRef

penso que com Hooks fica um pouco mais facil agora...

o Problema é que não encontro um bom tutorial que ajude a integrar react hooks redux e Bootstrap

O que pretendo no fundo é de um tutorial que ajude nesse sentido e já agora onde com este exemplo pego os valores dos inputs e se metodo onChange funciona.

Obrigado

1 resposta

Fala ai David, tudo bem? Para trabalhar com formulários existem algumas bibliotecas muito boas, por exemplo a Formik, tenho um vídeo no meu canal falando sobre a mesma:

Além dela, existe a React Form Hook que faz integração com os Hooks.

Com elas a gente não precisa ficar gerenciando os campos um à um, apenas pegamos o valor de todos eles caso o formulário seja válido e submetido.

Sobre a integração com o Redux, se você estiver se referindo ao formulário, eu não recomendaria isso, isso porque pode ocasionar problemas de performance ou consumir muito poder computacional, uma vez que a cada alteração no formulário muito coisa por baixo dos panos vai estar acontecendo.

A menos que seja um caso que realmente precise e tenha que ser feito com o Redux, do contrário eu tentaria evitar esse vínculo.

Espero ter ajudado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software