javascript - helmet - ReactJS advertencia de error

react helmet sync

Question

Estoy creando mi primera aplicación con ReactJS y encontré esta advertencia cuando ejecuto mi código:

Advertencia: PropType de formulario fallido: proporcionó un prop checked en un campo de formulario sin un controlador onChange . Esto generará un campo de sólo lectura. Si el campo debe ser mutable, use defaultChecked . De lo contrario, establezca onChange o readOnly . Compruebe el método de renderización de Login de Login .

¿Alguien puede decirme cómo lo arreglo por favor?

Answer 1

React tiene 2 formas de trabajar con controles de formulario: componentes controlados y componentes no controlados

Recibe esta advertencia cuando no proporciona el elemento ni los atributos necesarios para controlar ni los necesarios para un componente no controlado:

Advertencia: PropType de formulario fallido: proporcionó un prop verificado en un campo de formulario sin un controlador onChange. Esto generará un campo de sólo lectura. Si el campo debe ser mutable, use defaultChecked. De lo contrario, establezca onChange o readOnly. Compruebe el método de renderización de inicio de sesión.

Componentes controlados

Atributos necesarios:

1. value - <input> (no casilla de verificación o radio), <select> , <textbox> o checked (casilla de verificación o radio).
2. onChange

React maneja la condición del elemento actualizando el value o el atributo checked (dependiendo del elemento) desde las props o el state . Necesitamos notificar a reaccionar cuando hacemos un cambio, como insertar datos o marcar la casilla, por lo que reaccionar puede actualizar la condición del elemento cuando vuelve a presentar el componente. Para hacerlo, debemos incluir un controlador onChange , en el cual actualizaremos el state o notificaremos al padre del componente, para que actualice los props .

<input
  type="checkbox"
  checked={ this.props.checked }
  onChange={ this.checkboxHandler } 
/>

const { render } = ReactDOM;

class Demo extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      checked: true
    };
    
    this.checkboxHandler = this.checkboxHandler.bind(this);
  }
  
  checkboxHandler(e) {
    this.setState({
      checked: e.target.checked
    });
  }
  
  render() {
    return (
      <input
        type="checkbox"
        checked={ this.state.checked }
        onChange={ this.checkboxHandler } 
      />
    );
  }
}

render(
  <Demo />,
  document.getElementById(''demo'')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.js"></script>

<h1>The Checkbox</h1>

<div id="demo"></div>

Componentes no controlados

Atributos necesarios:

defaultValue - <input> (no casilla de verificación o radio), <select> , <textbox> defaultChecked <textbox> o defaultChecked for (casilla de verificación o radio).

React establece el valor inicial usando defaultValue or defaultChecked , y la actualización del estado del elemento es controlada por el usuario, generalmente a través del DOM usando refs.

<input
  type="checkbox"
  defaultChecked={ this.props.checked } 
/>

Answer 2

defaultChecked agregar el atributo defaultChecked a su checkbox :

<div>
    <input type=''checkbox'' defaultChecked />
</div>

Answer 3

defaultChecked posible que el defaultChecked no se actualice si el componente se vuelve a renderizar en el futuro, así que use este enfoque con precaución.

Puede que sea mejor usar una función en blanco para eliminar la advertencia. Especialmente si desea manejar, haga clic en la división completa que incluye la casilla de verificación y el texto asociado.

<div onClick={this.handleClick}>
  <input type="checkbox" checked={this.props.checked} onChange={()=>{}}/>
  {this.props.text}
</div>