リアクト・アプリをロードすると、コンソールに次のようなエラーが表示されます。
警告:フォームのpropTypeに失敗しました:フィールドに value
prop を指定しました。
フィールドに value
プロパティを指定しました。これは読み取り専用の
フィールドをレンダリングします。フィールドが変更可能である必要がある場合は、 defaultValue
を使用してください。そうでない場合は
onChangeまたは
readOnly` を設定します。のレンダリングメソッドをチェックする。
のレンダリングメソッドをチェックする。
私の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
この入力フィールドでユーザから入力値を受け取らない場合は、defaultValueを設定してこのフィールドを読み取り専用にする必要があります。
値を設定し、ユーザーとのインタラクションを行いたい場合は、onChangeValueを送信する必要があります。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)} />
);
}
警告が表示されるのは、入力にvalue属性を設定し、それを更新するハンドラを提供していないからです:
DOMからフォームの値を取得するためにrefを使用することができます。
onChangeハンドラ関数を設定する。