在項目中我們可能會遇到類似這樣的場景，也就是父子組件的雙向數據綁定
首先，先把在head中引入react.js、react-dom.js和可選擇的babel.js(這里需要注意引用的順序，react.js必須在react-dom.js之前)
<head>
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="babel.js"></script>
</head>
在body里新建一個掛載點
<body> <div id='app'></div> </body>
然后就可以開始寫JSX了，注意script標簽需注明type類型為"text/babel"或"text/jsx"
<script tpye="text/babel">
//父組件
class Father extends React.Component {
constructor(props) {
super(props)
this.state = {
fname: '父組件',
fage: 18,
key: ''
};
}
setFname(event) {
this.setState({fname: event.target.value, key: event.target.value}); //設置fname值為input的value值；key用來監聽值是否變化
}
setFage(event) {
this.setState({fage: event.target.value, key: event.target.value})
}
toData(data) {
this.setState({fname: data.name});
this.setState({fage: data.age});
}
render() {
return (
<div>
<table border="1" cellSpacing="0">
<tbody>
<tr>
<th colSpan="3">父組件數據</th>
</tr>
<tr>
<td>name</td>
<td>{this.state.nameFvalue}</td>
<td><input value={this.state.fname} onChange={this.setFname.bind(this)}/></td>
</tr>
<tr>
<td>age</td>
<td>{this.state.ageFvalue}</td>
<td><input value={this.state.fage} onChange={this.setFage.bind(this)}/></td>
</tr>
</tbody>
</table>
//子組件標簽里將父組件的數據傳遞給子組件，在子組件里利用props接收；key值變化時，子組件數據更新
<Son key={this.state.key} fname={this.state.fname} fage={this.state.fage} toData={this.toData.bind(this)}></Son>
</div>
)
}
}
</script>
//子組件
class Son extends React.Component {
constructor(props) {
super(props)
this.state = {
sVname: this.props.fname, //將父組件傳下來的值賦給sVname
sVage: this.props.fage
}
}
sVname(ev) {
console.log(ev.target)
this.setState({
sVname: ev.target.value
})
}
sVage(ev) {
this.setState({
sVage: ev.target.value
})
}
toData(data) {
// console.log(svname)
this.props.toData(data)
}
render() {
return (
<div>
<button onClick={this.toData.bind(this, {name: this.state.sVname, age: this.state.sVage})}>點我傳值
</button>
<table border="1" cellSpacing="0">
<tbody>
<tr>
<th colSpan="3">子組件數據</th>
</tr>
<tr>
<td>name</td>
<td>{this.state.sVname}</td>
<td><input value={this.state.sVname} onChange={this.sVname.bind(this)}/></td>
</tr>
<tr>
<td>age</td>
<td>{this.state.sVage}</td>
<td><input value={this.state.sVage} onChange={this.sVage.bind(this)}/></td>
</tr>
</tbody>
</table>
</div>
)
}
}