react 中父組件與子組件雙向綁定問題

來源：懂視網責編：小采時間：2020-11-27 21:56:32

react 中父組件與子組件雙向綁定問題

react 中父組件與子組件雙向綁定問題:在項目中我們可能會遇到類似這樣的場景，也就是父子組件的雙向數據綁定首先，先把在head中引入react.js、react-dom.js和可選擇的babel.js(這里需要注意引用的順序，react.js必須在react-dom.js之前) <head> <script

推薦度：

點擊下載本文 文檔為doc格式

導讀react 中父組件與子組件雙向綁定問題:在項目中我們可能會遇到類似這樣的場景，也就是父子組件的雙向數據綁定首先，先把在head中引入react.js、react-dom.js和可選擇的babel.js(這里需要注意引用的順序，react.js必須在react-dom.js之前) <head> <script

在項目中我們可能會遇到類似這樣的場景，也就是父子組件的雙向數據綁定

首先，先把在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> //受控組件當input值改變時觸發方法setFname </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><br> <br> //子組件標簽里將父組件的數據傳遞給子組件，在子組件里利用props接收；key值變化時，子組件數據更新
 <Son key={this.state.key} fname={this.state.fname} fage={this.state.fage} toData={this.toData.bind(this)}></Son> 
 </div>
 )
 }
 }<br><br><br> //子組件<br><br> 
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>

 )
 }
}
</script>

總結

以上所述是小編給大家介紹的react 中父組件與子組件雙向綁定問題，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com