web-dev-qa-db-ja.com

失敗したフォームpropType： `onChange`ハンドラなしでフォームフィールドに` value`プロップを提供しました

反応アプリをロードすると、コンソールにこのエラーが表示されます。

警告：フォームpropTypeの失敗：valueハンドラーなしでonChangeプロパティをフォームフィールドに指定しました。これにより、読み取り専用フィールドがレンダリングされます。フィールドを変更可能にする場合は、defaultValueを使用します。それ以外の場合は、onChangeまたはreadOnlyのいずれかを設定します。 AppFrameのrenderメソッドを確認してください。

私の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;

ここで実際に間違っていることを解決するのに苦労しています。アプリケーションは起動して動作しますが、コンソールの警告/エラーをすべて削除しようとしています。

javascriptjqueryformsreactjs
43
Nick Pocock

検索入力に値を直接入力しましたが、プレースホルダーが既にあるため、そこには利点がありません。次のいずれかから値を削除できます。

<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

64
jolvera

この入力フィールドでユーザーから入力値を取得しない場合は、defaultValueを設定してこのフィールドを読み取り専用にする必要があります。

値を設定し、ユーザーの操作を必要とする場合。 onChangeイベントを送信して、初期値の状態を更新する必要があります。これは、angularをサポートする双方向バインディングに似ています。

state = {
   keyword: 'test' 
} 

inputChangedHandler = (event) => {
    const updatedKeyword = event.target.value;
    // May be call for search result
}

render() {
  return (
      <input 
         type="text" 
         placeholder="Search..."
         value={this.state.keyword} 
         onChange={(event)=>this.inputChangedHandler(event)} />
   );
}
10
reza.cse08

入力に値属性を設定し、それを更新するハンドラを提供しないため、警告が表示されます。これを行うには2つの方法があります。

  1. refを使用して、DOMからフォーム値を取得できます。

    https://reactjs.org/docs/uncontrolled-components.html

  2. setonChangeハンドラー関数。

3
Shimon Itkin