1.<SubSubComp {...this.props } /> 传递属性，{...props}的方式为组件传递了这两个属性，这就是JSX中的延展属性，"..."成为延展操作符
2.mixin那里我真的没有看懂哈。
3.
<script type="text/jsx">
var FormApp = React.createClass({
getInitialState:function(){
return {
inputValue: 'input value',
selectValue: 'A',
radioValue:'B',
checkValues:[],
textareaValue:'some text here,,,'
}
},
handleSubmit:function(e){
e.preventDefault();
var formData = {
input: this.refs.goodInput.getDOMNode().value,
select: this.refs.goodSelect.getDOMNode().value,
textarea: this.refs.goodTextarea.getDOMNode().value,
radio: this.state.radioValue,
check: this.state.checkValues,
}
console.log('the form result is:')
console.log(formData);
this.refs.goodRadio.saySomething();
},
handleRadio:function(e){
this.setState({
radioValue: e.target.value,
})
},
handleCheck:function(e){
var checkValues = this.state.checkValues.slice();
var newVal = e.target.value;
var index = checkValues.indexOf(newVal);
if( index == -1 ){
checkValues.push( newVal )
}else{
checkValues.splice(index,1);
}
this.setState({
checkValues: checkValues,
})
},
render: function(){
return (
<form onSubmit={this.handleSubmit}>
<input ref="goodInput" type="text" defaultValue={this.state.inputValue }/>
<!-- 这里的ref还可以这样写哈 function(comp){React.findDOMNode(comp).focus()} -->
<br/>
选项：
<select defaultValue={ this.state.selectValue } ref="goodSelect">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
<br/>
<p>radio button!</p>
<RadioButtons ref="goodRadio" handleRadio={this.handleRadio} />
<br/>
<Checkboxes handleCheck={this.handleCheck} />
<br/>
<textarea defaultValue={this.state.textareaValue} ref="goodTextarea"></textarea>
<button type="submit">提交</button>
</form>
)
}
});
var RadioButtons = React.createClass({
saySomething:function(){
alert("yo what's up man!");
},
render:function(){
return (
<span>
A
<input onChange={this.props.handleRadio} name="goodRadio" type="radio" value="A"/>
B
<input onChange={this.props.handleRadio} name="goodRadio" type="radio" defaultChecked value="B"/>
C
<input onChange={this.props.handleRadio} name="goodRadio" type="radio" value="C"/>
</span>
)
}
});
var Checkboxes = React.createClass({
render: function(){
return (
<span>
A
<input onChange={this.props.handleCheck} name="goodCheckbox" type="checkbox" value="A"/>
B
<input onChange={this.props.handleCheck} name="goodCheckbox" type="checkbox" value="B" />
C
f<input onChange={this.props.handleCheck} name="goodCheckbox" type="checkbox" value="C" />
</span>)
}
})
var formApp = React.render(
<FormApp />,
document.getElementById('app')
)
</script>
4.minxins的双向数据绑定。
<script type="text/jsx">
var EasyForm = React.createClass({
mixins: [ React.addons.LinkedStateMixin ],
getInitialState:function(){
return {
message: 'react is awesome!',
isReactAwesome: true,
}
},
render:function(){
return (
<div>
<h1>我想说： {this.state.message}</h1>
<h2>React是不是很好用？ {this.state.isReactAwesome?'非常好用！':'一般般。。。'}</h2>
<input type="text" valueLink={this.linkState('message')} />
<br/>
<input type="checkbox" checkedLink={this.linkState('isReactAwesome') } />
<br/>
<SubComp messageLink={ this.linkState('message') } likeLink={this.linkState('isReactAwesome')} />
</div>
)
}
});
var SubComp = React.createClass({
render:function(){
return (
<div>
<h3>这是个子组件哦</h3>
<SubSubComp {...this.props } />
</div>
)
}
});
var SubSubComp = React.createClass({
render:function(){
return (
<div>
<p>你想说什么？</p>
<input type="text" valueLink={ this.props.messageLink } />
<p>你稀罕React么？</p>
<input type="checkbox" checkedLink = {this.props.likeLink } />
</div>
)
}
})
React.render( <EasyForm />, document.getElementById('app') );
</script>
4.生命周期的函数：
getInitialState
getDefaultProps
componentWillMount
componentDidMount
componentWillUnmount
killMySelf
shouldComponentUpdate
componentWillUpdate
componentDidUpdate
doUpdate
