Fehlgeschlagener Formular-PropType: Sie haben einem Formularfeld ohne einen "onChange" -Handler einen "Wert" -Prop bereitgestellt

Wenn ich meine Reaktions-App lade, wird dieser Fehler in der Konsole angezeigt.

Warnung: Fehlgeschlagenes Formular propType: Sie haben valueeinem Formularfeld ohne onChangeHandler eine Requisite bereitgestellt . Dadurch wird ein schreibgeschütztes Feld gerendert. Wenn das Feld veränderlich sein soll, verwenden Sie defaultValue. Andernfalls stellen Sie entweder onChangeoder ein readOnly. Überprüfen Sie die Rendermethode von AppFrame.

Meine AppFrame-Komponente befindet sich unten:

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;

Ich kämpfe darum herauszufinden, was ich hier eigentlich falsch mache. Die Anwendung startet und funktioniert, aber ich versuche, alle Konsolenwarnungen / -fehler zu entfernen.

Sie haben einen Wert direkt in Ihre Sucheingabe eingegeben. Ich sehe den Vorteil dort nicht, da Sie bereits einen Platzhalter haben. Sie können den Wert entweder entfernen aus:

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

dazu:

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

Oder wenn Sie denken, dass Sie es haben müssen, stellen Sie es ein als defaultValue:

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

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

Wenn Sie dem Benutzer den Eingabewert nicht über dieses Eingabefeld entnehmen, müssen Sie dieses Feld schreibgeschützt machen, indem Sie den Standardwert festlegen .

Für den Fall, dass Sie den Wert festlegen und Benutzerinteraktion einbeziehen möchten. Sie sollten das Ereignis onChange senden , um den Status des Anfangswertes zu aktualisieren. Dies ist wie eine Zweiwegebindung als Winkelstütze.

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)} />
   );
} 

Die Warnung wird angezeigt, weil Sie ein Wertattribut für die Eingabe festlegen und keinen Handler zum Aktualisieren bereitstellen. Es gibt zwei Möglichkeiten, dies zu tun:

1. Sie können eine Referenz verwenden , um Formularwerte aus dem DOM abzurufen.

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

2. Setzen Sie die onChange- Handler-Funktion.