Nieudana forma propType: Dostarczyłeś propozycję "wartości" do pola formularza bez instrukcji "onChange"

Question

Po załadowaniu aplikacji reagowania pojawia się ten błąd w konsoli.

Ostrzeżenie: Nie forma propType: Podany value rekwizyt do pola formularza bez onChange obsługi. Spowoduje to wyświetlenie pola tylko do odczytu o numerze . Jeśli pole powinno być zmienne, użyj defaultValue. W przeciwnym razie, ustaw albo onChange albo readOnly. Sprawdź metodę renderowania: .

Mój składnik AppFrame jest poniżej:

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; 

walczę wypracować co ja tu właściwie robię źle. Aplikacja uruchamia się i działa, ale próbuję usunąć wszystkie ostrzeżenia/błędy konsoli.

Answer 1

Podałeś wartość bezpośrednio w polu wyszukiwania, nie widzę korzyści, ponieważ masz już placholder. Można też usunąć wartość z:

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

do tego:

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

A jeśli myślisz, musisz go mieć, ustawić ją jako defaultValue:

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

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