我正在尝试我的React.js的第一部分,并在很早的时候就陷入了困境…我有下面的代码,该代码将搜索表单呈现为<div id="search"></div>。但是,在搜索框中输入内容无济于事。
<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*但是我只是想让这一类正常工作。)
SearchFacet*
您尚未将onchange道具放在机箱中input。它必须onChange在JSX中。
onchange
input
onChange
<input type="text" value={this.props.searchString} ref="searchStringInput" onchange={this.handleChange} <--[should be onChange] />
在文档中充分考虑了将value prop 传递给<input>,然后以某种方式更改响应以使用onChange处理程序响应用户交互而传递的值的主题。
value
<input>
他们将这些输入称为“ 受控组件”,而将使DOM本地处理输入值和随后来自用户的更改的输入称为“非受控组件”。
每当您将valuean 的prop 设置input为某个变量时, 就会有一个Controlled Component 。这意味着您 必须 通过某种编程方式 来 更改变量的值,否则输入将始终保持该值并且永远不会更改,即使您键入-输入的本机行为(在输入时更新其值)也将 被覆盖 在这里反应。
因此,您可以正确地从状态中获取该变量,并可以设置一个处理程序来更新状态。问题是因为您拥有onchange并且onChange处理不正确,所以从未调用过该处理函数,因此value当您键入输入时,永远不会更新该处理函数。当你使用onChange处理程序 被 调用时,value 是 当你输入更新,你可以看到你的变化。