ReactJS中文视频教程 [百度网盘]

#21

收益匪浅,看文档一些不明白的问题通透了;期待下一期flux和router的教程!!!

#22

这下载不下来呢,有360网盘么,百度网盘太渣了

#23

是我笨,要多看多练

#24

期待Flux哈哈~

#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} />
		);
	}
});
#26

对于新手来讲,讲到太棒了! 期待你的react router视频和 flux视频

#27

看了几集. 非常不错. 期待继续后面的 flux 和 react-router

#28

感觉挺不错的,视频讲得很好,一下就学会了不少.
特别是电脑键盘敲出来的音效很有吸引力,问一个题外话:你敲击电脑键盘的音效用的是什么软件啊?

#29

低级机械键盘或者mbp的键盘而已

#30

楼主,您的博客怎么打不开啊?想看看您的博客

#31

请问教程中使用的是什么编辑器?

#32

看样子想ATOM

#33

多谢

#34

这是传说中的最好的编辑器,也是相当奢侈的编辑器,名字叫 sublimetext2
本人推荐用 emacs 或者vim 但是 入门的门槛比较的高,但是 它们都开源哦

#36

坐等React+flux+react-router教程!

#37

flux视频,还没上啊.

#38

讲的很好,React+flux 视频 后续跟上啊,等待中。。。

#39

翘首以盼你的react router视频和 flux视频!!!

#40

可以发布到慕课网啊

#41

从来不看任何中文XXX视频, 看看官网的文档就回了. :smile: