学习React特征（五）- Button组件

本文已参与[新人创作礼]活动, 一起开启掘金创作之路。 我报名参加金石计划一期挑战——瓜分10万奖池 这是我的第五篇文章，点击查看活动详情。

试做一个 React Button 组件

1. 首先创建一个 Button 基础组件

function App() {
  const [count, setCount] = React.useState(0);
  const handleClick = () => {
    setCount(count + 1);
  };
  return (
    <div>
      <button type="button" onClick={handleClick}>
        Click Me
      </button>
       {count}
    </div>
  );
}

2. Button 可以用于切换状态:

function App () {
  const [isShow, setShow] = React.useState(true);

  const handleClick = () => {
    setShow(!isShow);
  };

  return (
    <div>
      <button type="button" onClick={handleClick}>
        Click Me
      </button>

      {isShow && <div>Let's learn React</div>}
    </div>
  );
}

3. 拆分组件 - 使Button子组件更容易复用

function App(){
  const [isShow, setShow] = React.useState(true);

  const handleClick = () => {
    setShow(!isShow);
  };

  const Button = ({onClick, children}) => {
  return (
    <button type="button" onClick={onClick}>
      {children}
    </button>);
  };

  return (
    <div>
      <Button onClick={handleClick}>Toggle</Button>

      {isShow && <div>Let's learn React</div>}
    </div>
  );
}

4. 尝试用多个Button来处理

function App(){
  const [isShow, setShow] = React.useState(false);

  const handleOpen = () => {
    setShow(true);
  };

  const handleClose = () => {
    setShow(false);
  };

  const Button = ({ onClick, children }) => {
    return (
      <button type="button" onClick={onClick}>
        {children}
      </button>
    );
  };

  return (
    <div>
      <Button onClick={handleOpen}>Open</Button>
      <Button onClick={handleClose}>Close</Button>

      {isShow && <div>Let's learn React</div>}
    </div>
    );
  }

小结

至此，对一个基本 Button 有了初步的了解，后续根据学习进度，会做更多分享