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

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

公司主營業(yè)務(wù)：網(wǎng)站建設(shè)、網(wǎng)站制作、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出鄂倫春免費做網(wǎng)站回饋大家。

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

首先，先把在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});  //設(shè)置fname值為input的value值；key用來監(jiān)聽值是否變化 
} 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">父組件數(shù)據(jù)</th> </tr> <tr> <td>name</td> <td>{this.state.nameFvalue}</td> <td><input value={this.state.fname} onChange={this.setFname.bind(this)}/></td> //受控組件當input值改變時觸發(fā)方法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>           //子組件標簽里將父組件的數(shù)據(jù)傳遞給子組件，在子組件里利用props接收；key值變化時，子組件數(shù)據(jù)更新
          <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">子組件數(shù)據(jù)</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>

總結(jié)

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

分享文章：react中父組件與子組件雙向綁定問題
分享鏈接：http://muchs.cn/article10/jojpgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、動態(tài)網(wǎng)站、域名注冊、網(wǎng)站改版、網(wǎng)站導航、網(wǎng)站維護

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容