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

Posted 2023-02-22

【中文标题】如何将按钮事件连接到另一个 React 组件？

【英文标题】：How to connect a button event to another React component?

【发布时间】：2019-07-05 09:37:07

【问题描述】：

我正在学习 React，我正在尝试制作一个简单的应用程序：您单击一个按钮，它会增加一个计数器。我准备了两个组件，ClickCounter 和ClickButton，但我不确定如何将它们连接在一起。我阅读了不同的教程，但他们希望我的组件是父/子 - 从架构的角度来看，我是否完全缺少某些东西？

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);

【参考方案1】：

当两个兄弟组件需要共享某些状态时，一种常用的技术是传递给lift the state up to the first common ancestor（在本例中为Container）并将状态和状态更改函数作为道具传递给子组件。

示例

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>