React 表單與事件
阿新 • • 發佈：2019-01-10
本章節我們將討論如何在 React 中使用表單。
一個簡單是例項
在例項中我們設定了輸入框 input 值value = {this.state.data}。在輸入框值發生變化時我們可以更新 state。我們可以使用 onChange 事件來監聽 input 的變化，並修改 state。
例項
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>php中文網 React 例項</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>
點選 "執行例項" 按鈕檢視線上例項
上面的程式碼將渲染出一個值為 Hello php! 的 input 元素，並通過 onChange 事件響應更新使用者輸入的值。
例項 2
在以下例項中我麼將為大家演示如何在子元件上使用表單。onChange 方法將觸發 state 的更新並將更新的值傳遞到子元件的輸入框的 value 上來重新渲染介面。
你需要在父元件通過建立事件控制代碼 (handleChange) ，並作為 prop (updateStateProp) 傳遞到你的子元件上。
例項
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>php中文網 React 例項</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>
點選 "執行例項" 按鈕檢視線上例項
React 事件
以下例項演示通過 onClick 事件來修改資料：
例項
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>php中文網 React 例項</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中文網'}) }, render: function() { var value = this.state.value; return <div> <button onClick={this.handleChange}>點我</button> <h4>{value}</h4> </div>; } }); ReactDOM.render( <HelloMessage />, document.getElementById('example') ); </script> </body> </html>
點選 "執行例項" 按鈕檢視線上例項
當你需要從子元件中更新父元件的 state 時，你需要在父元件通過建立事件控制代碼 (handleChange) ，並作為 prop (updateStateProp) 傳遞到你的子元件上。例項如下：
例項
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>php中文網 React 例項</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}>點我</button>
<h4>{this.props.myDataProp}</h4>
</div>
}
});
var HelloMessage = React.createClass({
getInitialState: function() {
return {value: 'Hello php!'};
},
handleChange: function(event) {
this.setState({value: 'php中文網'})
},
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>