如何将按钮事件连接到另一个React组件？

Question

I'm learning React and I'm trying to make a simple application: you click on a button and it increments a counter. I've prepared two components, ClickCounter and ClickButton , but I'm not sure how to connect them together. I've read different tutorials but they expect my components to be Parent/Child - is there something I'm completely missing from a architectural perspective?

class ClickCounter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  render() {
    return <h1>{this.state.count}</h1>;
  }
}

function ClickButton(props) {
  function handleClick(e) {
    e.preventDefault();
    console.log("clicked");
    // increment the ClickCounter..how?
  }
  return (
    <button id="btn" onClick={handleClick}>Click me</button>
  );
}


function Container() {
  return (
    <div>
      <ClickCounter />
      <ClickButton />
    </div>
  );
}

const root = document.getElementById("root");
ReactDOM.render(<Container />, root);

Answer 1

A common technique for when two sibling components need to share some state is to lift the state up to the first common ancestor ( Container in this case) and pass down the state and state-altering functions as props to the children.

Example

 function ClickCounter(props) { return <h1>{props.count}</h1>; } function ClickButton(props) { return ( <button id="btn" onClick={props.handleClick}>Click me</button> ); } class Container extends React.Component { state = { count: 0 }; onClick = () => { this.setState(prevState => { return { count: prevState.count + 1 }; }); }; render() { return ( <div> <ClickCounter count={this.state.count} /> <ClickButton handleClick={this.onClick} /> </div> ); } } ReactDOM.render(<Container />, document.getElementById("root")); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>