请选择 进入手机版 | 继续访问电脑版

React建立一个简单的计时器

前端开发  / React.js  / 倒序浏览   © 著作权归作者本人所有

#楼主# 2020-5-16

跳转到指定楼层

在React中建立计数器的非常简单的例子

在这个简短的教程中,我们将使用之前概述的许多概念和理论构建一个非常简单的React计数器示例。

在Codepen中,我们不需要导入React和ReactDOM,因为它们已经在范围中添加了。

我们以div为单位显示计数,并添加一些按钮来增加该计数:

const Button = ({ increment }) => {
  return <button>+{increment}</button>
}

const App = () => {
  let count = 0

  return (
    <div>
      <Button increment={1} />
      <Button increment={10} />
      <Button increment={100} />
      <Button increment={1000} />
      <span>{count}</span>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('app'))

让我们添加一些功能,使我们可以通过单击按钮,添加onClickFunction道具来更改计数:

const Button = ({ increment, onClickFunction }) => {
  const handleClick = () => {
    onClickFunction(increment)
  }
  return <button onClick={handleClick}>+{increment}</button>
}

const App = () => {
  let count = 0

  const incrementCount = increment => {
    //TODO
  }

  return (
    <div>
      <Button increment={1} onClickFunction={incrementCount} />
      <Button increment={10} onClickFunction={incrementCount} />
      <Button increment={100} onClickFunction={incrementCount} />
      <Button increment={1000} onClickFunction={incrementCount} />
      <span>{count}</span>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('app'))

在这里,每个Button元素都有2个道具:incrementonClickFunction。我们创建4个不同的按钮,并带有4个增量值:1、10 100、1000。

单击“按钮”组件中的按钮时,将incrementCount调用该函数。

此功能必须增加本地计数。我们该怎么做?我们可以使用钩子:

const { useState } = React

const Button = ({ increment, onClickFunction }) => {
  const handleClick = () => {
    onClickFunction(increment)
  }
  return <button onClick={handleClick}>+{increment}</button>
}

const App = () => {
  const [count, setCount] = useState(0)

  const incrementCount = increment => {
    setCount(count + increment)
  }

  return (
    <div>
      <Button increment={1} onClickFunction={incrementCount} />
      <Button increment={10} onClickFunction={incrementCount} />
      <Button increment={100} onClickFunction={incrementCount} />
      <Button increment={1000} onClickFunction={incrementCount} />
      <span>{count}</span>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('app'))

useState()将count变量初始化为0,并为我们提供了setCount()更新其值的方法。

我们在incrementCount()方法实现中都使用了这两种方法,该方法实现setCount()将值更新为的现有值count以及每个Button组件传递的增量。

转播转播
回复

使用道具

成为第一个评论人

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于作者

damonare

网站编辑

  • 主题

    267

  • 帖子

    269

  • 关注者

    0

手机版|ObjectX 超对象 |粤ICP备20005929号
Powered by  © 2019-2020版权归ObjectX 超对象