Échec de la forme propType: Vous avez fourni une `valeur` prop à un champ de formulaire sans `onChange` handler

Question

Quand je charge mon réagir application, j'obtiens cette erreur dans la console.

Avertissement: Échec de la forme propType: Vous avez fourni un value prop à un formulaire domaine sans une onChange gestionnaire. Cela rendra lecture seule champ. Si le champ doit être mutable utiliser defaultValue. Sinon, soit onChange ou readOnly. Vérifier la méthode de rendu de AppFrame.

Mon AppFrame composant est ci-dessous:

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;

J'ai du mal à travailler sur ce que je suis en train de faire du mal ici. L'application démarre et fonctionne, mais je suis en train de retirer de la console d'avertissement/d'erreur.

Answer 1

Vous avez mis une valeur directement dans votre recherche d'entrée, je ne vois pas l'intérêt là parce que vous avez déjà un espace réservé. Vous pouvez soit supprimer la valeur de:

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

pour cela:

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

Ou si vous pensez que vous devez l'avoir, de le définir comme defaultValue:

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

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

Answer 2

Si vous ne prenez pas la valeur d'entrée de l'utilisateur par le présent champ de saisie, puis vous avez besoin pour faire de ce champ en lecture seule par le réglage de la valeur par défaut.

Dans le cas où si vous souhaitez définir la valeur et impliquent l'interaction de l'utilisateur. Vous devez envoyer onChange de l'événement pour mettre à jour l'état de la valeur initiale. C'est comme deux voies liaison angulaire de soutien.

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 3

l'avertissement s'affiche car vous définissez une valeur d'attribut de l'entrée et de ne pas fournir un gestionnaire de mise à jour. il y a deux façon de faire:

1. vous pouvez utiliser une ref pour obtenir les valeurs d'un formulaire à partir de la DOM.

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

2. ensemble onChange fonction de gestionnaire.