without - formulario javascript ejemplo

PropType fallido del formulario: Usted proporcionó una prop `value` a un campo de formulario sin un controlador` onChange`

Question

Cuando carga mi aplicación de reacción, aparece este error en la consola.

Advertencia: PropType de formulario fallido: proporcionó un prop de value a un campo de formulario sin un controlador onChange . Esto generará un campo de sólo lectura. Si el campo debe ser mutable, use defaultValue . De lo contrario, establezca onChange o readOnly . Compruebe el método de renderizado de AppFrame .

El componente de mi AppFrame está abajo:

class AppFrame extends Component {
render() {
return (
<div>
<header className="navbar navbar-fixed-top navbar-shadow">
<div className="navbar-branding">
<a className="navbar-brand" href="dashboard">
<b>Shire</b>Soldiers
</a>
</div>
<form className="navbar-form navbar-left navbar-search alt" role="search">
<div className="form-group">
<input type="text" className="form-control" placeholder="Search..."
value="Search..."/>
</div>
</form>
<ul className="nav navbar-nav navbar-right">
<li className="dropdown menu-merge">
<span className="caret caret-tp hidden-xs"></span>
</li>
</ul>
</header>
<aside id="sidebar_left" className="nano nano-light affix">
<div className="sidebar-left-content nano-content">
<ul className="nav sidebar-menu">
<li className="sidebar-label pt20">Menu</li>
<li className="sidebar-label">
<IndexLink to="/" activeClassName="active">Dashboard</IndexLink>
</li>
<li className="sidebar-label">
<Link to="/fixtures" activeClassName="active">Fixtures</Link>
</li>
<li className="sidebar-label">
<Link to="/players" activeClassName="active">Players</Link>
</li>
</ul>
</div>
</aside>
<section id="content_wrapper">
<section id="content" className="table-layout animated fadeIn">
{this.props.children}
</section>
</section>
</div>
)
}
}
export default AppFrame;

Estoy luchando para resolver lo que realmente estoy haciendo mal aquí. La aplicación se inicia y funciona, pero estoy intentando eliminar todas las advertencias / errores de la consola.

Answer 1

Si no toma el valor de entrada del usuario mediante este campo de entrada, entonces debe hacer que este campo sea de solo lectura configurando el valor predeterminado .

En caso de que si desea establecer el valor e involucrar la interacción del usuario. Debe enviar el evento onChange para actualizar el estado del valor inicial. Esto es como un enlace bidireccional como soporte angular.

state = {
keyword: ''test''
}
inputChangedHandler = (event) => {
const updatedKeyword = event.target.value;
// May be call for search result
}
render() {
return (
<input
type="text"
placeholder="Search..."
value={this.state.keyword}
onChange={(event)=>this.inputChangedHandler(event)} />
);
} 

Answer 2

Usted ha puesto un valor directamente en su entrada de búsqueda, no veo el beneficio allí porque usted ya tiene un propietario. Usted podría eliminar el valor de:

<input type="text" className="form-control" placeholder="Search..." value="Search..."/>

a esto:

<input type="text" className="form-control" placeholder="Search..." />

O si crees que debes tenerlo, defaultValue como valor defaultValue :

<input type="text" className="form-control" placeholder="Search..." defaultValue="Search..."/>

Documentación: https://facebook.github.io/react/docs/uncontrolled-components.html#default-values

Answer 3

la advertencia aparece porque establece un atributo de valor en la entrada y no proporciona ningún controlador para actualizarlo. Hay dos formas de hacerlo:

1. puede utilizar una referencia para obtener valores de formulario desde el DOM.

   https://reactjs.org/docs/uncontrolled-components.html

2. Establecer la función del controlador de cambio.