[解決済み] フォームの propType に失敗しました。onChange` ハンドラを持たないフォームフィールドに `value` プロパティを指定しました。

質問

reactアプリを読み込むと、コンソールにこのようなエラーが表示されます。

警告 フォームのpropTypeに失敗しました。あなたが提供した value を指定しました。 フィールドに onChange ハンドラのないフォームフィールドに これは読み取り専用の フィールドを表示します。もしフィールドが変更可能であるべきなら defaultValue . それ以外の場合は のどちらかを設定します。 onChange または 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/uncontrolled-components.html#default-values