精华内容
下载资源
问答
  • 步行者
  • React计算器应用程序 演示: :
  • npx create-react-app用脚手架创建一个react项目 在src下创建components/count.jsx 在App.js引入 import logo from './logo.svg'; import './App.css'; import Count from './components/count' function App() { ...

    效果
    在这里插入图片描述

    1. npx create-react-app用脚手架创建一个react项目
    2. 在src下创建components/count.jsx
      在这里插入图片描述
    3. 在App.js引入
    import logo from './logo.svg';
    import './App.css';
    import Count from './components/count'
    function App() {
      return (
        <div className="App">
          <Count />
        </div>
      );
    }
    
    export default App;
    
    1. 在count.jsx写逻辑
    import React, { Component } from 'react'
    export default class Count extends Component {
        state = {
            count: 0
        }
        increase = (select) => {
            // 得到选择的值
            let number = this.select.value * 1
            // 得到原本的count值,计算新count
            let count = this.state.count
            // 更新状态
            this.setState({ count: count + number })
        }
        decrease = () => {
            // 得到选择的值
            let number = this.select.value * 1
            // 得到原本的count值,计算新count
            let count = this.state.count
            // 更新状态
            this.setState({ count: count - number })
        }
        increaseOdd = () => {
            // 得到选择的值
            let number = this.select.value * 1
            // 得到原本的count值,计算新count
            let count = this.state.count
            // 符合条件更新状态
            if (count % 2) {
                this.setState({ count: count + number })
            }
        }
        increaseSync = () => {
            // 异步更新状态
            setTimeout(() => {
                // 得到选择的值
                let number = this.select.value * 1
                // 得到原本的count值,计算新count
                let count = this.state.count
                this.setState({ count: count + number })
            }, 1000)
        }
        render() {
            let count = this.state.count
            return (
                <div>
                    <p>click {count} times</p>
                    <div>
                        <select ref={select => this.select = select}>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                        </select>&nbsp;
                        <button onClick={this.increase}>+</button>&nbsp;
                        <button onClick={this.decrease}>-</button>&nbsp;
                        {/* Odd奇数 */}
                        <button onClick={this.increaseOdd}>odd</button>&nbsp;
                        <button onClick={this.increaseSync}>sync</button>&nbsp;
                    </div>
                </div>
            )
        }
    }
    
    

    参考自:https://www.bilibili.com/video/BV1oW41157DY?p=38
    视频内的异步更新会出现问题,本文中代码做了修改

    展开全文
  • 可使用的React计算器 以create-react-app引导的以可访问性为重点的基本React计算器 计算器应用程序,重点关注使用React.js构建的可访问性。 练习React Component类,状态,道具和AWS Polly。 这个项目远非完美。 ...
  • React计算器 React Calculator是一个简单的react计算器项目。 它包括以下四个里程碑,分别是使用CRA(Create-React-App)创建项目,设置短毛绒,构建App并将其部署到Heroku。 建于 Java脚本 React 现场演示 入门 要...
  • React计算器 一个简单的React和通量计算器。 数据流 当按下按钮时,它会触发一个带有按钮值的动作。 此操作通过调度程序到达商店。 商店将此信息传递给更新状态的计算器。 然后,商店将要求计算器提供新的display...
  • 它在生产模式下正确捆绑了React,并优化了构建以获得最佳性能。 最小化构建,文件名包含哈希。 您的应用已准备好进行部署! 有关更多信息,请参见有关的部分。 npm run eject 注意:这是单向操作。 eject ,您将...
  • React计算器-源码

    2021-02-09 18:04:10
    React计算器 Microverse First React项目 计算器应用 目录 建于 JavaScript 的GitHub Vim VSCode 主动链接到网站 检查此的页面 贡献 欢迎提供文稿,问题和功能要求! 随时检查。 致谢 给使用过代码的任何人的...
  • 我们的计算器 第一步-我们需要的组件 我们集思广益并制作了图纸,考虑了所需的组件。 重构-组件树结构 编码后,我们有一些时间可以用来重构一些代码。 所以我们编辑了第一张图纸 多亏了我的同事的加入,我从您那里学...
  • 该项目是通过引导的。 您将在下面找到一些有关如何执行常见任务的信息。 您可以在找到本指南的最新版本。 目录 自动格式化代码 更改页面<title> 安装依赖项 导入组件 代码分割 添加样式表 ...met
  • 简单React计算器:我的第一个React项目
  • 它在生产模式下正确捆绑了React,并优化了构建以获得最佳性能。 最小化内部版本,文件名包含哈希值。 您的应用已准备好进行部署! 有关更多信息,请参见关于的部分。 npm run eject 注意:这是单向操作。 eject ...
  • ZPE-最小的React计算器客户端应用程序 描述 最好使用React创建一个简单的前端api客户端计算器。 结构 该结构的主要组件在下面的树表示中。 . ├── src/ | Sources directory. │ ├── CalculatorTools/ | ...
  • 数学魔术师的计算器。 能够执行所有基本操作:+,-,x,/,%和+/-。 :television: 媒体 :toolbox: 使用的工具和技术 内置 HTML5 CSS3 JavaScript ES6 React17.0.1 :rocket: 入门 要启动并运行本地副本,请...
  • Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中,可以运行: npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑,则页面将重新加载。 您还将在控制台中看到任何...
  • 创建 React 应用程序入门 这个项目是用引导的。 可用脚本 在项目目录中,您可以运行: npm start 在开发模式下运行应用程序。 打开在浏览器中查看。 如果您进行编辑,页面将重新加载。 您还将在控制台中看到任何 ...
  • 0, action){ switch (action.type){ case INCREMENT: return state + action.data case DECREMENT: return state - action.data default: return state } } app.js 利用redux-react进行redux和react的关联 import ...

    redux异步中间件

    npm install --save redux-thunk
    

    applyMiddleware()

    1. 作用:应用上基于 redux 的中间件(插件库)
    2. 编码:
    import {createStore, applyMiddleware} from 'redux' 
    import thunk from 'redux-thunk' // redux 异步中间件 
    const store = createStore( counter, applyMiddleware(thunk) // 应用上异步中间件 )
    

    store.js

    import {
        createStore,
        applyMiddleware
    } from 'redux'
    import thunk from 'redux-thunk'
    import {
        counter
    } from './reducers'
    
    // 内部第一次调用redux函数得到初始值
    const store = createStore(counter, applyMiddleware(thunk)) //应用异步中间件
    
    export default store
    

    actions.js
    同步action返回一个对象
    异步action返回的是一个函数

    import {
        INCREMENT
    } from '../redux/action-types.js'
    export const increment = function (number) {
        return {
            type: INCREMENT,
            data: number
        }
    }
    export const incrementAsync = (number) => {
        return dispatch => {
            setTimeout(() => {
                // 1s后才分发一个增加的action
                dispatch(increment(number))
            }, 1000)
        }
    }
    

    以上为主要代码,一下为补充内容

    action-types.js

    // 包含所有模块的字符串
    export const INCREMENT = 'INCREMENT'
    

    reducers.js

    import {INCREMENT,DECREMENT} from './action-types'
    export function counter(state = 0, action){
        switch (action.type){
            case INCREMENT:
                return state + action.data
            case DECREMENT:
                return state - action.data
            default:
                return state
        }
    }
    

    app.js
    利用redux-react进行redux和react的关联

    import React  from 'react'
    import {connect} from 'react-redux'  //关联redux和react
    import { increment, decrement ,incrementAsync} from '../redux/actions'
    import Counter from '../components/count.jsx'
    
    // 对组件进行包装,为了向ui组件传递属性,就可以避免redux内嵌进代码
    // 内部会调用dispatch
    export default connect(
        // state,increment,decrement会被解构出来
        state=>({count:state}),
        // 由于与action内的刚好对应,所以es6简写
        {increment,decrement,incrementAsync}
    )(Counter)
    
    展开全文
  • React计算器 一个React实现的计算器 安装 npm install --save react-calculator 用法 import React from 'react' ; import Calculator from 'react-calculator' ; React . render ( < Calculator> , document . ...
  • React计算器。 在这个项目中,使用React.js库构建了一个计算器。 此网络应用程序已上线,您可以在此处进行检查: 建于 React 创建React应用 先决条件 要在本地启动并运行该项目,必须在本地安装和 。 入门 要在本地...
  • Sezzle计算器入门 看到它部署在 克隆此项目 在项目目录中,可以运行: yarn install yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。... React 火力基地 萨斯 材质用户界面 演示版
  • 基于React制作计算器实例是一款使用React框架制作简单的加减乘除计算器,支持输入公式计算结果效果代码。
  • 使用React实现一个简单计算器

    千次阅读 2020-09-10 19:07:25
    使用React实现一个简单的计算器代码 实现效果: index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-...

    使用React实现一个简单的计算器代码
    实现效果:

    在这里插入图片描述
    index.html

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>React App</title>
      </head>
      <body>
        <div id="root"></div>
      <script type="text/babel" src="../src/input-button.js"></script>
      </body>
    </html>
    

    input-button.js 按钮组件

    import React, { Component } from 'react';
    import PropTypes from 'prop-types'
    
    class inButton extends Component{
        static propTypes={
            className: PropTypes.string
        }
        static defaultProps={
            className:"same_size"
        }
        render() {
            return <input
                type="button"
                className={this.props.className}
                value={this.props.value} />
        }
    }
    export default inButton
    

    input-text.js 显示组件

    import React, { Component } from 'react';
    
    class inText extends Component{
        render() {
            return <input type="text" id="content" value={this.props.value} readOnly={true}/>
        }
    }
    export default inText
    

    App.js

    import React, { Component } from 'react';
    import Button from './input-button'
    import Text from './input-text'
    
    class App extends Component {
        constructor() {
            super();
            this.state={
                string:""
            }
        }
        handleButton(e){
            if (e.target.value!==undefined){
                let instring=e.target.value;
                let prvcontent=this.state.string;
                let content="";
                if (instring==="+"||instring==="-"||instring==="*"||instring==="/"){
                    content=prvcontent+" "+instring+" ";
                }
                else if (instring==="附加"){
                    content="功能未开放";
                }
                else if (instring==="C"){
                    content="";
                }
                else if (instring==="Back"){
                    if(prvcontent[prvcontent.length-1]===" " && prvcontent[prvcontent.length-3]===" ")
                        prvcontent=prvcontent.slice(0,prvcontent.length-3);
                    else
                        prvcontent=prvcontent.slice(0,prvcontent.length-1);
                    content=prvcontent;
                }
                else if (instring==="="){
                    let arr=prvcontent.split(" ");
                    let ans=[];
                    let i=0;
                    while (i<arr.length){
                        if (arr[i]==="")
                            i++;
                        else if (arr[i]==="+"){
                            ans.push(arr[i+1]);
                            i+=2;
                        }
                        else if (arr[i]==="-"){
                            ans.push(-arr[i+1]);
                            i+=2;
                        }
                        else if (arr[i]==="*"){
                            let a;
                            let b=ans.pop();
                            if(arr[i+1]==="-"){
                                a=-arr[i+2];
                                i+=3;
                            }
                            else {
                                a=arr[i+1];
                                i+=2;
                            }
                            ans.push(b*a);
                        }
                        else if (arr[i]==="/"){
                            let a;
                            let b=ans.pop();
                            if (arr[i+1]==="0"){
                                content="ERROR!";
                                return;
                            }
                            else if(arr[i+1]==="-"){
                                a=-arr[i+2];
                                i+=3;
                            }
                            else {
                                a=arr[i+1];
                                i+=2;
                            }
                            ans.push(b/a);
                        }
                        else {
                            ans.push(arr[i]);
                            i++;
                        }
    
                    }
                    // console.log(ans);
                    let fin_ans=parseFloat(ans[0]);
                    for (i=1;i<ans.length;i++)
                        fin_ans+=parseFloat(ans[i]);
                    content=prvcontent+instring+fin_ans;
                }
                else{
                    content=prvcontent+instring;
                }
                this.setState({
                    string:content
                })
            }
        }
        render() {
            return (
                <div id="main">
                    <div id="input_text">
                        <Text value={this.state.string}/>
                    </div>
                    <div id="input_button" onClick={this.handleButton.bind(this)}>//设置事件代理
                        <Button value={1}/>
                        <Button value={2}/>
                        <Button value={3}/>
                        <Button value={"Back"}/>
                        <Button value={"C"}/>
                        <Button value={4}/>
                        <Button value={5}/>
                        <Button value={6}/>
                        <Button value={"+"}/>
                        <Button value={"-"}/>
                        <Button value={7}/>
                        <Button value={8}/>
                        <Button value={9}/>
                        <Button value={"*"}/>
                        <Button value={"/"}/>
                        <Button value={"附加"}/>
                        <Button value={0}/>
                        <Button value={"."}/>
                        <Button value={"="} className={"equal_size"}/>
                    </div>
                </div>
            )
        }
    
    
    
    }
    export default App
    

    index.js

    import React from 'react';
    import ReactDOM from 'react-dom';
    import App from './App'
    import './index.css'
    
    
    ReactDOM.render(
        <App />,
        document.getElementById('root')
    );
    
    

    index.css

    #main{
        border: 1px solid black;
        margin: 1vw auto;
        width: 45vw;
        height: 30vw;
    }
    
    #input_text{
        /*border: 1px solid red;*/
        margin: 3% 4%;
        width: 92%;
        height: 14%;
        display: flex;
    }
    #input_button{
        /*border: 1px solid black;*/
        margin: 3% 2%;
        width: 96%;
        height: 74%;
        display: flex;
        flex-wrap: wrap;
    }
    
    #input_text #content{
        flex: auto;
        margin: 0;
        width: 100%;
        /*height: 65%;*/
        font-size: 2vw;
    }
    #input_button .same_size{
        flex: auto;
        margin: 1%;
        width: 18%;
        height: 20%;
        font-size: 1.5vw;
    }
    #input_button .equal_size{
        flex: auto;
        margin: 1%;
        width: 38%;
        height: 20%;
        font-size: 1.5vw;
    }
    
    展开全文
  • React计算器 ReactJS和Foxy Cart的基本订单计算器组件 通过运行npm install安装所有deps 要使用该应用程序,请使用npm start并导航至127.0.0.1:8080/webpack-dev-server/ 变更记录 添加了babel-loader并设置了sass ...
  • } Calculator.js import React from 'react' import 'antd-mobile/dist/antd-mobile.css' import style from './home.css' class Calculator extends React.Component{ constructor(props){ super(props);...
    .calculator{
      width:90%;
      border: 1px darkblue ;
      margin: 40px auto 0;
      text-align: center;
      background-color: white;
      border-radius: 10px;
    }
    
    .calculator button{
      width:65px;
      height: 65px;
      border-radius: 10%;
      border: whitesmoke solid 1px;
      background: lightskyblue;
      font-size: 30px;
      margin: 5px;
    }
    
    .calculator input{
      height:50px;
      font-size: 30px;
      width: 90%;
      text-align: right;
      margin:5px ;
      border: 0;
    }
    
    .calculator label{
      display: block;
      height:30px;
      font-size: 20px;
      text-align: right;
      width: 90%;
      color: gray;
    }
    

    Calculator.js

    import React from 'react'
    import 'antd-mobile/dist/antd-mobile.css'
    import style from './home.css'
    
    class Calculator extends React.Component{
    
        constructor(props){
            super(props);
            this.state=({
                buttons:['MC','M+','M-','MR','C','÷','×','⬅',7,8,9,'-',4,5,6,'+',1,2,3,'=','%',0,'.','='],
                screenContent:'',
                operator:'',
                numbers:[],
                result:'',
            });
        }
    
        componentDidMount(){
        }
    
        componentDidUpdate(prevState){
    
        }
    
        handleClick(button){
          console.log('响应点击事件',button);
          //文本框显示计算内容
          let screenContent = this.state.screenContent;
          screenContent+=button;
          if(button==='C'){
            // screenContent='';
            // this.setState({numbers:[],operator:''});
            window.location.href = '/myapp/index/Calculator';
          }
          this.setState({screenContent:screenContent});
          //存储数据和操作符
          if(button==='÷'|| button==='×'|| button ==='-' || button==='+'){
            this.setState({operator: button});
          }else {
            this.setState((state)=>{
              console.log(state.numbers,button);
              if(state.numbers.length>=1 && this.state.operator===''){
                let numStr =state.numbers[0].toString()+button.toString();
                if(button==='.'){
                  numStr+='000000000001';
                }
                console.log('连续数字',parseFloat('66.7'));
                const num = parseFloat(numStr);
                return{ numbers: [num]}
              }
              return{ numbers: [...state.numbers,button]}
              },()=>{
              //计算
              const operator = this.state.operator;
              if(operator!==''){
                let result = 0;
                let numbers = this.state.numbers;
                console.log('ddddddd',operator,this.state.numbers);
                const a1 = numbers.pop();
                const a2 = numbers.pop();
                switch (operator){
                  case '+':result = a2+a1;numbers.push(result);this.setState({numbers:numbers});break;
                  case '-':result = a2-a1;numbers.push(result);this.setState({numbers:numbers});break;
                  case '×':result = a2*a1;numbers.push(result);this.setState({numbers:numbers});break;
                  case '÷':result = a2/a1;numbers.push(result);this.setState({numbers:numbers});break;
                }
                console.log(result);
                this.setState({result:result});
              }
            });
          }
        }
    
        render(){
            return     <div className={style.calculator}>
              <input defaultValue={this.state.screenContent}/>
              <label>{this.state.result+''}</label>
              {
                this.state.buttons.map(button=>(<button onClick={this.handleClick.bind(this,button)}>{button}</button>))
              }
            </div>
    
        }
    }
    
    export default Calculator
    
    

    效果如下:
    在这里插入图片描述

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,968
精华内容 787
关键字:

react计算器