Question

我正在学习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);

Answer 1

当两个同级组件需要共享某种状态时，一种常见的技术是lift the state up to the first common ancestor（在这种情况下为Container）并将状态和状态更改功能传递给子项。 / p>

示例

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>

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

1 个答案: