鍍金池/ 問答/HTML/ React父子組件通信問題

React父子組件通信問題

圖片描述

結(jié)構(gòu)如上，每個(gè)子計(jì)數(shù)器是子組件，總計(jì)數(shù)器和重置是父組件，現(xiàn)在我想點(diǎn)擊重置的時(shí)候呢所有的子計(jì)數(shù)器都回到自己的初始值，請(qǐng)問應(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è)子組件，
建議先看下文檔，上面有這類問題的說明
鏈接描述

2017年3月30日 10:15