reactjs - ¿Cómo cambiar la casilla de verificación reaccionar correctamente?

Question

¿Cuál es la forma correcta de cambiar el valor de la casilla de verificación?

Opción 1

import React, { useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const [x, setX] = useState(false);

  const soldCheckbox = ({ target: { checked } }) => {
    console.log(x, checked);
    setX(checked);
  };
  return (
    <div>
      <input type="checkbox" checked={x} onChange={soldCheckbox} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

opcion 2

import React, { useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const [x, setX] = useState(false);
  console.log(x);
  return (
    <div>
      <input type="checkbox" checked={x} onChange={() => setX(!x)} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

De hecho, creo que no hay diferencia, pero solo quería escuchar una opinión diferente. Tal vez algo que no sé o puede haber otras soluciones a este problema.

Answer 1

Ambas formas son casi iguales, pero la primera opción en realidad es más redundante, analicemos por qué:

Tanto el primer como el segundo método son implementar componentes controlled

Esto significa que está proporcionando un valor y una forma de cambiarlo, por lo que la responsabilidad de actualizar y controlar los valores se abstrae del componente.

Pero ¿por qué la primera forma es redundante?

En realidad, no es necesario leer desde e.target.checked que siempre refleja el estado local x , por lo que no es necesario leer desde e.target.checked y revertirlo haciendo: setX(!e.target.checked) desde x y el e.target.checked siempre será el mismo.

Advertencias

Aunque está bien hacer onClick={e => parentHandler(e)} en una expresión en línea (función de flecha), debe tener cuidado, pasarlo así a una entrada no causará ningún problema, pero cuando se pasa a un componente secundario que implementa React.memo o PureComponent por ejemplo, esto volverá a representar el componente cada vez, porque siempre se crea una nueva instancia de la función (la firma es la misma, pero la comparación superficial siempre devolverá falsa porque son diferentes instancias), por lo que, por razones de optimización, siempre es mejor aprobar propuestas como esta: <Child onClick={this.clickHandler} id={item.id} /> y sobre el niño: onClick={() => this.props.onClick(this.props.id)} lugar de simplemente: <Child onClick={e => this.onClick(item.id)} />

Answer 2

Creo que todo depende de la situación.

La primera opción será mejor si tiene muchos formularios y componentes. Puede manejar todo con un controlador.

const handler = (e) => {
  const { target } = e;
  const value = target.type === ''checkbox'' ? target.checked : target.value;
  const { name } = target;

  setForm( f => ({ ...f, [name]: value }));
};

Segundo, si la casilla de verificación es una y la aplicación debe reaccionar de alguna manera a su cambio. Hay una tercera forma de entradas no controladas .

Answer 3

En este caso específico, habría elegido la opción 2, código más limpio en mi opinión.

setX cambia el estado, no es necesario que una función llame a setX y extraiga el valor del evento si sabemos que el valor es x.

Answer 4

La única diferencia es la codificación limpia, la primera forma es mejor si necesita hacer algo excepto cambiar el estado (por ejemplo, para llamar a una solicitud http) y la segunda es buena si solo necesita una casilla de verificación para trabajar y almacenar su valor.

Answer 5

Parece que ambas opciones son equivalentes. Si miramos la documentación para el evento onChange provisto por React (no el evento de cambio provisto por html), dice:

El evento onChange se comporta como se esperaría: cuando se cambia un campo de formulario, este evento se activa.

Intencionalmente no utilizamos el comportamiento del navegador existente porque onChange es un nombre inapropiado para su comportamiento y React se basa en este evento para manejar la entrada del usuario en tiempo real.

https://reactjs.org/docs/dom-elements.html#onchange

Entonces, simplemente elija la opción que crea que produce un código más limpio.

Answer 6

import React, { useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const [x, setX] = useState(false);

  const soldCheckbox = ({ target: { checked } }) => {
    console.log(x, checked);
    setX(checked);
  };
  return (
    <div>
      <input type="checkbox" checked={x} onChange={soldCheckbox} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);