javascript - 表单propType : You provided a `value` prop to a form field without an `onChange` handler失败

加载我的React应用程序时，我在控制台中收到此错误。



我的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/uncontrolled-components.html#default-values

关于javascript - 表单propType : You provided a `value` prop to a form field without an `onChange` handler失败，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43556212/