zoukankan      html  css  js  c++  java
  • [React] Update State in React with Ramda's Evolve

    In this lesson we'll take a stateful React component and look at how we can refactor our setState calls to use an updater function and then leverage Ramda's evolvefunction to make our updater function a reusable utility that isn't tied to the React API.

    //@flow
    
    import React from 'react';
    import {inc, dec, lensProp, over, evolve, multiply} from 'ramda';
    
    // Using Lense
    const countLens = lensProp('count');
    const increase = over(countLens, inc);
    const decrease = over(countLens, dec);
    const doubleCount = evolve({count: multiply(2)});
    
    export default class Counter extends React.Component {
    
        state = {
            count: 0
        };
    
        increase = () => this.setState(increase);
    
        decrease = () => this.setState(decrease);
    
        double = () => this.setState(doubleCount);
    
        render() {
            return (
                <div>
                    <button onClick={this.increase}>+</button>
                    {this.state.count}
                    <button onClick={this.decrease}>-</button>
                    <button
                        disabled={this.state.count === 0}
                        onClick={this.double}
                    >*2</button>
                </div>
            );
        }
    
    }
  • 相关阅读:
    jenkins GitHub 自动触发
    rabbitmq web管理
    系统编码,文件编码,python编码
    反转二叉树
    从右边看二叉树
    python pyenv
    js 闭包
    git review & devops过程
    centos7搭建自己的yum源
    优先级队列PriorityQueue 测试,会自动排序
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6741676.html
Copyright © 2011-2022 走看看