私はThink in Reactを学んでいますが、この例のSearchBarにvalue={this.props.filterText}
とchecked={this.props.inStockOnly}
が必要な理由を理解していないと、jsFiddleはそのままで動作し、SearchBarに渡される小道具には意味がありません検索は、ユーザー入力を処理して状態を変更するものです。ユーザーの入力はthis.props.filterText
に設定されていないまま入力の値に反映されますが、なぜそこにありますか?React検索バーに小道具を渡す目的は何ですか?
var SearchBar = React.createClass({
handleChange: function() {
this.props.onUserInput(
this.refs.filterTextInput.value,
this.refs.inStockOnlyInput.checked
);
},
render: function() {
return (
<form>
<input
type="text"
placeholder="Search..."
value={this.props.filterText}
ref="filterTextInput"
onChange={this.handleChange}
/>
<p>
<input
type="checkbox"
checked={this.props.inStockOnly}
ref="inStockOnlyInput"
onChange={this.handleChange}
/>
{' '}
Only show products in stock
</p>
</form>
);
}
});
あなたは偉大なポイントを作るより重要になってきます。この例では混乱しますが、 'SearchBar filterText =" FootBall "/>' – azium