ตอบสนองรูปแบบกับเหตุการณ์ที่เกิดขึ้น
ส่วนนี้จะหารือถึงวิธีการใช้แบบฟอร์มในการตอบสนอง
มันเป็นตัวอย่างของการที่เรียบง่าย
ในตัวอย่างที่เราตั้งค่าของค่ากล่องรับสัญญาณที่ = {} this.state.dataเมื่อป้อนข้อมูลการเปลี่ยนแปลงในมูลค่ากล่องเราสามารถอัปเดตรัฐ เราสามารถใช้onchange เหตุการณ์ที่จะฟังสำหรับการเปลี่ยนแปลงในการป้อนข้อมูลและแก้ไขรัฐ
var HelloMessage = React.createClass({ getInitialState: function() { return {value: 'Hello w3big!'}; }, 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') );
รหัสดังกล่าวจะทำให้ค่าของสวัสดี w3big! องค์ประกอบเข้าและการปรับปรุงในการตอบสนองต่อผู้ใช้ป้อนค่า onchange เหตุการณ์
ตัวอย่างที่ 2
ในตัวอย่างต่อไปนี้ผมจะแสดงวิธีการใช้งานในรูปแบบที่อยู่ในส่วนประกอบย่อย วิธีการonChange ก่อให้เกิดการปรับปรุงและปรับปรุงค่าของรัฐถูกส่งไปยังกล่องใส่ประกอบย่อยของค่าขึ้นอินเตอร์เฟซใหม่การแสดงผล
คุณจำเป็นต้องมีองค์ประกอบที่ผู้ปกครองของคุณจะถูกส่งไปยังประกอบย่อยโดยการสร้างตัวจัดการเหตุการณ์(handleChange) และเป็นเสาA (updateStateProp)
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 w3big!'}; }, 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') );
ตอบสนองต่อเหตุการณ์
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการปรับเปลี่ยนข้อมูลผ่านเหตุการณ์ onClick:
var HelloMessage = React.createClass({ getInitialState: function() { return {value: 'Hello w3big!'}; }, handleChange: function(event) { this.setState({value: '本教程'}) }, render: function() { var value = this.state.value; return <div> <button onClick={this.handleChange}>点我</button> <h4>{value}</h4> </div>; } }); ReactDOM.render( <HelloMessage />, document.getElementById('example') );
เมื่อคุณจำเป็นต้องปรับปรุงรัฐจากองค์ประกอบที่ผู้ปกครองประกอบย่อยที่คุณจะต้องไปยังส่วนของผู้ปกครองโดยการสร้างตัวจัดการเหตุการณ์ (handleChange)และส่งมอบให้กับส่วนประกอบย่อยของคุณเป็นเสา (updateStateProp) ตัวอย่างมีดังนี้
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 w3big!'}; }, handleChange: function(event) { this.setState({value: '本教程'}) }, render: function() { var value = this.state.value; return <div> <Content myDataProp = {value} updateStateProp = {this.handleChange}></Content> </div>; } }); ReactDOM.render( <HelloMessage />, document.getElementById('example') );