React 中國語リファレンスマニュアル
/ React 表單與事件
React 表單與事件
本章節(jié)我們將討論如何在 React 中使用表單。
一個(gè)簡單是實(shí)例
在實(shí)例中我們設(shè)置了輸入框 input 值value = {this.state.data}。在輸入框值發(fā)生變化時(shí)我們可以更新 state。我們可以使用 onChange 事件來監(jiān)聽 input 的變化，并修改 state。
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>php中文網(wǎng) React 實(shí)例</title>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
<script src="http://static.php.cn/assets/react/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var HelloMessage = React.createClass({
getInitialState: function() {
return {value: 'Hello php!'};
},
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} />
<h4>{value}</h4>
</div>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
</script>
</body>
</html>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
上面的代碼將渲染出一個(gè)值為 Hello php! 的 input 元素，并通過 onChange 事件響應(yīng)更新用戶輸入的值。
實(shí)例 2
在以下實(shí)例中我么將為大家演示如何在子組件上使用表單。onChange 方法將觸發(fā) state 的更新并將更新的值傳遞到子組件的輸入框的 value 上來重新渲染界面。
你需要在父組件通過創(chuàng)建事件句柄 (handleChange) ，并作為 prop (updateStateProp) 傳遞到你的子組件上。
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>php中文網(wǎng) React 實(shí)例</title>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
<script src="http://static.php.cn/assets/react/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Content = React.createClass({
render: function() {
return <div>
<input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp} />
<h4>{this.props.myDataProp}</h4>
</div>;
}
});
var HelloMessage = React.createClass({
getInitialState: function() {
return {value: 'Hello php!'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function() {
var value = this.state.value;
return <div>
<Content myDataProp = {value}
updateStateProp = {this.handleChange}></Content>
</div>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
</script>
</body>
</html>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
React 事件
以下實(shí)例演示通過 onClick 事件來修改數(shù)據(jù)：
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>php中文網(wǎng) React 實(shí)例</title>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
<script src="http://static.php.cn/assets/react/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var HelloMessage = React.createClass({
getInitialState: function() {
return {value: 'Hello php!'};
},
handleChange: function(event) {
this.setState({value: 'php中文網(wǎng)'})
},
render: function() {
var value = this.state.value;
return <div>
<button onClick={this.handleChange}>點(diǎn)我</button>
<h4>{value}</h4>
</div>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
</script>
</body>
</html>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
當(dāng)你需要從子組件中更新父組件的 state 時(shí)，你需要在父組件通過創(chuàng)建事件句柄 (handleChange) ，并作為 prop (updateStateProp) 傳遞到你的子組件上。實(shí)例如下：
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>php中文網(wǎng) React 實(shí)例</title>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
<script src="http://static.php.cn/assets/react/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Content = React.createClass({
render: function() {
return <div>
<button onClick = {this.props.updateStateProp}>點(diǎn)我</button>
<h4>{this.props.myDataProp}</h4>
</div>
}
});
var HelloMessage = React.createClass({
getInitialState: function() {
return {value: 'Hello php!'};
},
handleChange: function(event) {
this.setState({value: 'php中文網(wǎng)'})
},
render: function() {
var value = this.state.value;
return <div>
<Content myDataProp = {value}
updateStateProp = {this.handleChange}></Content>
</div>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
</script>
</body>
</html>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例