当我加载我的react应用程序时,我在控制台中遇到了这个错误.

警告:表单proType失败:您为表单提供了valueprops 字段,但没有onChange处理程序.这将呈现一个只读的 田野.如果该字段应该是可变的,则使用defaultValue.否则, 设置onChangereadOnly.判断的呈现方法 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..."/>

to this:

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

Or if you think you must have it, set it as defaultValue:

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

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

Jquery相关问答推荐

jQuery获取DOM node ?

$(document).ready(function() VS $(function(){

Javascript 仅打印 iframe 内容

jquery 淡入淡出元素不显示样式为可见性:隐藏的元素

如何使用 jQuery 将表格的一行滚动到视图 (element.scrollintoView) 中?

如何在循环内创建动态变量名称?

基于垂直滚动的jquery添加/删除类?

在 800px 后在 scrollDown 上显示 div

实用的 javascript 面向对象设计模式示例

如何使用 jquery 正确格式化货币?

在没有 jQuery 的情况下在 node.js 上合并或合并 JSON

jQuery 判断 是否存在并且有一个值

如何在 HTML选项标签上显示工具提示?

使html文本输入字段随着我输入而增长?

停止输入/书写后如何触发输入文本中的事件?

如何签入用户已在 Google recaptcha 中选中复选框的 js?

使用 AJAX 加载 Bootstrap 弹出内容.这可能吗?

与 C# HashSet 等效的 JavaScript 是什么?

jQuery或javascript查找页面的内存使用情况

我应该在addClass之前使用hasClass吗?