收益匪浅,看文档一些不明白的问题通透了;期待下一期flux和router的教程!!!
ReactJS中文视频教程 [百度网盘]
will_wyx
#25
双向绑定的那篇,介绍了一个示例,是深级别的子组件与顶级组件实现数据双向绑定。
其中提到原理说,实际是用 onChange 实现的。
试了一下,发现值传不上来
var RootComp = React.createClass({
getInitialState: function() {
return {
value: ''
}
},
handleChange: function(e) {
console.debug(e, this.state, this.props, this.refs);
this.setState({
value: '?'
});
},
render: function() {
return (
<div>
<SubComp onChange={this.handleChange} />
<h1>The value: {this.state.value}</h1>
</div>
);
}
});
var SubComp = React.createClass({
render: function() {
return (
<input type="text" ref="txtInput" onChange={this.props.onChange} />
);
}
});
顶级组件在 onChange 事件不能获得子组件的值,
原来是要把 onChange 封装成对象,再传给 props
var RootComp = React.createClass({
getInitialState: function() {
return {
value: ''
}
},
handleChange: function(value) {
this.setState({
value: value
});
},
render: function() {
var valueLink = { handleChange: this.handleChange };
return (
<div>
<SubComp valueLink={valueLink} />
<h1>The value: {this.state.value}</h1>
</div>
);
}
});
var SubComp = React.createClass({
handleChange: function() {
var superHandleChange = this.props.valueLink.handleChange;
superHandleChange(this.refs.txtInput.getDOMNode().value);
},
render: function() {
return (
<input type="text" ref="txtInput" onChange={this.handleChange} />
);
}
});