表单propType失败:您在没有`onChange`处理程序的情况下为表单字段提供了`value`属性 [英] Failed form propType: You provided a `value` prop to a form field without an `onChange` handler
问题描述
加载我的React应用程序时,我在控制台中收到此错误.
When I load my react app I get this error in the console.
警告:表单propType失败:您为表单提供了
value
道具 没有onChange
处理程序的字段.这将呈现一个只读 场地.如果该字段应该是可变的,请使用defaultValue
.否则, 设置onChange
或readOnly
.检查的渲染方法AppFrame
.
Warning: Failed form propType: You provided a
value
prop to a form field without anonChange
handler. This will render a read-only field. If the field should be mutable usedefaultValue
. Otherwise, set eitheronChange
orreadOnly
. Check the render method ofAppFrame
.
我的AppFrame组件如下:
My AppFrame component is below:
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;
我正在努力找出我实际上在这里做错的事情.该应用程序启动并运行,但是我正在尝试删除所有控制台警告/错误.
I am struggling to work out what I am actually doing wrong here. The application starts up and works but I am trying to remove all console warning/errors.
推荐答案
您已经在搜索输入中直接输入了一个值,我看不到有什么好处,因为您已经有了一个占位符.您可以从以下位置删除该值:
You've put a value directly in your search input, I don't see the benefit there because you already have a placeholder. You could either remove the value from:
<input type="text" className="form-control" placeholder="Search..." value="Search..."/>
对此:
<input type="text" className="form-control" placeholder="Search..." />
或者,如果您认为必须拥有它,请将其设置为defaultValue
:
Or if you think you must have it, set it as defaultValue
:
<input type="text" className="form-control" placeholder="Search..." defaultValue="Search..."/>
文档: https://facebook.github.io/react/docs/uncontrol-components.html#default-values
这篇关于表单propType失败:您在没有`onChange`处理程序的情况下为表单字段提供了`value`属性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!