web-dev-qa-db-fra.com

Type de formulaire ayant échoué: vous avez fourni un prop `valeur` à un champ de formulaire sans gestionnaire` onChange`

Lorsque je charge mon application de réaction, je reçois cette erreur dans la console.

Avertissement: Type de formulaire ayant échoué: vous avez fourni une propriété value à un champ de formulaire sans gestionnaire onChange. Cela rendra un champ en lecture seule. Si le champ doit être modifiable, utilisez defaultValue. Sinon, définissez onChange ou readOnly. Vérifiez la méthode de rendu de AppFrame.

Mon composant AppFrame 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;

Je me bats pour comprendre ce que je ne fais pas vraiment ici. L'application démarre et fonctionne, mais j'essaie de supprimer tous les avertissements/erreurs de la console.

javascriptjqueryformsreactjs
43
Nick Pocock

Vous avez mis une valeur directement dans votre entrée de recherche, je ne vois pas l’avantage là-bas, car 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 ça:

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

Ou, si vous pensez en avoir besoin, définissez-le comme suit: defaultValue:

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

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

64
jolvera

Si vous ne prenez pas la valeur d'entrée de l'utilisateur dans ce champ, vous devez le rendre en lecture seule en définissant le paramètre defaultValue.

Si vous souhaitez définir la valeur et impliquer une interaction de l'utilisateur. Vous devriez envoyer l'événement onChange pour mettre à jour l'état de la valeur initiale. Cela ressemble à une liaison bidirectionnelle en tant que support 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)} />
   );
}
10
reza.cse08

l'avertissement apparaît parce que vous définissez un attribut value sur l'entrée et que vous ne fournissez aucun gestionnaire pour le mettre à jour. il y a deux façons de le faire:

  1. vous pouvez utiliser un ref pour obtenir les valeurs de formulaire à partir du DOM.

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

  2. définir la fonction de gestionnaire onChange .

3
Shimon Itkin