javascript - helmet - ReactJS advertencia de error
react helmet sync (3)
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:
-
value
-<input>
(no casilla de verificación o radio),<select>
,<textbox>
ochecked
(casilla de verificación o radio). -
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 }
/>
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 controladoronChange
. Esto generará un campo de sólo lectura. Si el campo debe ser mutable, usedefaultChecked
. De lo contrario, establezcaonChange
oreadOnly
. Compruebe el método de renderización deLogin
deLogin
.
¿Alguien puede decirme cómo lo arreglo por favor?
defaultChecked
agregar el atributo defaultChecked
a su checkbox
:
<div>
<input type=''checkbox'' defaultChecked />
</div>
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>