Я пытаюсь выполнить свой первый бит React.js, и я наступил раньше... У меня есть код ниже, который отображает форму поиска в <div id="search"></div>
. Но ввод в поле поиска ничего не делает.
Предположительно что-то пропало, пропуская реквизит и состояние вверх и вниз, и это похоже на общую проблему. Но я в тупике - я не вижу, чего не хватает.
var SearchFacet = React.createClass({
handleChange: function() {
this.props.onUserInput(
this.refs.searchStringInput.value
)
},
render: function() {
return (
<div>
Search for:
<input
type="text"
value={this.props.searchString}
ref="searchStringInput"
onchange={this.handleChange} />
</div>
);
}
});
var SearchTool = React.createClass({
render: function() {
return (
<form>
<SearchFacet
searchString={this.props.searchString}
onUserInput={this.props.onUserInput}
/>
<button>Search</button>
</form>
);
}
});
var Searcher = React.createClass({
getInitialState: function() {
return {
searchString: ''
}
},
handleUserInput: function(searchString) {
this.setState({
searchString: searchString
})
},
render: function() {
return (
<div>
<SearchTool
searchString={this.state.searchString}
onUserInput={this.handleUserInput}
/>
</div>
);
}
});
ReactDOM.render(
<Searcher />,
document.getElementById('searcher')
);
(В конце концов у меня будут другие типы SearchFacet*
, но я просто пытаюсь заставить это работать.)