在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ React父子組件通信問(wèn)題

React父子組件通信問(wèn)題

圖片描述

結(jié)構(gòu)如上，每個(gè)子計(jì)數(shù)器是子組件，總計(jì)數(shù)器和重置是父組件，現(xiàn)在我想點(diǎn)擊重置的時(shí)候呢所有的子計(jì)數(shù)器都回到自己的初始值，請(qǐng)問(wèn)應(yīng)該怎么做？

回答
編輯回答
孤影

瀉藥！
直接上代碼：

import React from 'react';

class Parent extends React.Component {
  constructor() {
    super(...arguments);
    this.state = {
      children1Value: 0,
      children2Value: 0,
    };
  }

  render() {
    const {children1Value, children2Value} = this.state;
    return (
      <div>
        <Children1 value={children1Value} setValue={v => this.setState({children1Value: v})}/>
        <Children2 value={children2Value} setValue={v => this.setState({children2Value: v})}/>
        <button onClick={() => resetValue()}>重置</button>
      </div>
    );
  }

  resetValue(){
    this.setState({children1Value: 0, children2Value: 0})
  }
}

const Children1 = ({value, setValue}) => {
  return (
    <div onClick={() => setValue(value + 1)}>{value}</div>
  );
};
const Children2 = ({value, setValue}) => {
  return (
    <div onClick={() => setValue(value + 1)}>{value}</div>
  );
};

其他的，按照這個(gè)思路改改就可以了。

2017年3月2日 04:56
編輯回答
夢(mèng)若殤

狀態(tài)提升，將父組件的狀態(tài)作為屬性分發(fā)到各個(gè)子組件，
建議先看下文檔，上面有這類問(wèn)題的說(shuō)明
鏈接描述

2017年3月30日 10:15