加载我的React应用程序时,我在控制台中收到此错误。
警告:表单propType失败:您在value没有onChange处理程序的情况下向表单字段提供了prop 。这将呈现一个只读字段。如果该字段应可变使用defaultValue。否则,设置onChange或readOnly。检查的渲染方法 AppFrame。
value
onChange
defaultValue
readOnly
AppFrame
我的AppFrame组件如下:
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;
我正在努力找出我实际上在这里做错了什么。该应用程序启动并运行,但是我正在尝试删除所有控制台警告/错误。
您已经在搜索输入中直接输入了一个值,但由于您已经有一个占位符,因此看不到那里的好处。您可以从以下位置删除该值:
<input type="text" className="form-control" placeholder="Search..." value="Search..."/>
对此:
<input type="text" className="form-control" placeholder="Search..." />
或者,如果您认为必须拥有它,请将其设置为defaultValue:
<input type="text" className="form-control" placeholder="Search..." defaultValue="Search..."/>
文档:https : //facebook.github.io/react/docs/un受控- components.html#default- values