无法在 React 输入文本字段中键入内容
我正在尝试我的第一点 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*