写在前面
今天再接再厉,把教程过完哈哈哈哈
demo09
<script type="text/babel">
var Input = React.createClass({
getInitialState: function() {
return {value: 'Hello!'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function () {
var value = this.state.value;
return (
<div>
<input type="text" value={value} onChange={this.handleChange} />
<p>{value}</p>
</div>
);
}
});
ReactDOM.render(<Input/>, document.getElementById('example'));
</script>
这个demo中,突然有种想法,这就是实现数据的单向绑定的例子对不哈
ps1:有点要注意的这里的onChange是react魔改过后的,变成即时调用,而不是原生的onchange需要回车或者失焦后才会调用。
ps2:注意与demo7的区别
这是有个合起来的想法,加入我有一个输入框,然后输入值后,点击按钮,把值给到标签上。。
<script type="text/babel">
var Input = React.createClass({
getInitialState: function() {
return {value: 'Hello!'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function () {
var value = this.state.value;
return (
<div>
<input type="text" value={value}/>
<input type="button" value="click this" onClick={this.handleClick} />
<p>{value}</p>
</div>
);
}
});
ReactDOM.render(<Input/>, document.getElementById('example'));
</script>
重新思考人生,使用了react,我们对于js的使用要更加遵从与规范。
什么是规范,能变的 ,在类之中,都应该放在this.state中
而不是随便搞得var
<script type="text/babel">
var Input = React.createClass({
getInitialState: function() {
return {value: 'Hello!',temp:''};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
handleClick:function(){
this.setState({value:this.state.value,temp:this.state.value});
},
render: function () {
var value = this.state.value;
var temp = this.state.temp;
return (
<div>
<input type="text" value={value} onChange={this.handleChange} />
<input type="button" value="click this" onClick={this.handleClick} />
<p>{temp}</p>
</div>
);
}
});
ReactDOM.render(<Input/>, document.getElementById('example'));
</script>
歪楼了
回归demo9
例子主要讲的是可以通过
event.target.value
获取值ko
demo10
说好的几个小时入门的react。。
貌似几天看的一共也没个小时。。。。
--------------------------小分割下
又学到了一招,通过
setinterval(function(){}.bind(this), 1000)
来解决在setinterval(function(){中的this指向的window的问题}, 1000)
setTimeout里面的上下文相当于是window,所以指向的都是window
这里通过.bind(this)把上下文换成setinterval所在的上下文。
componentDidMount: function () {
this.timer = setInterval(function () {
var opacity = this.state.opacity;
opacity -= .05;
if (opacity < 0.1) {
opacity = 1.0;
}
this.setState({
opacity: opacity
});
}.bind(this), 100);
alert('1111');
},
所以里面可以安心的使用this.setState,(以前自己都是全局搞个that借用下 /(ㄒoㄒ)/~~)
在方法中的js可以正常使用,但是在React.createClass({...})这一级不能用。只能用指定的/
render: function () {
return (
<div style={{opacity: this.state.opacity}}>
Hello {this.props.name}
</div>
);
}
注意样式写法{{ }}
未完待续