文档章节

React 使用 linkState 组件

爱吃柠檬的橘子
 爱吃柠檬的橘子
发布于 2017/09/07 10:00
字数 181
阅读 27
收藏 0
点赞 0
评论 0

绑定事件到状态

官方实现

npm

安装

npm install react-link-state --save

使用示例

import React from 'react';
import linkState from 'react-link-state';
 
export default MyForm extends React.Component {
  constructor(props) {
    super(props);
 
    this.state = {
      username: '',
      password: '',
      toggle: false
    };
  }
 
  render() {
    console.log(this.state);
    
    return (
      <form>
        <input type="text" valueLink={linkState(this, 'username')} />
        <input type="password" valueLink={linkState(this, 'password')} />
        <input type="checkbox" checkedLink={linkState(this, 'toggle')}
      </form>
    );
  }
}

使用示例2

import linkState from 'react-link-state'

class Demo extends Component {
    constructor(props) {
        super(props)
        this.state = {
            text: ''
        }
    }

    render() {
        const {text} = this.state
        return (
            <div>
                <input valueLink={linkState(this, 'text')} type="text"/>
            </div>
        )
    }
}

 

其它实现

github

安装

npm install --save linkstate

用法示例

import linkState from 'linkstate';

class Foo extends Component {
  state = {
    text: ''
  };
  render(props, state) {
    return (
      <input
        value={state.text}
        onInput={linkState(this, 'text')}
      />
    );
  }
}

用法示例2

import linkState from 'linkstate'

class Demo extends Component {
    constructor(props) {
        super(props)
        this.state = {
            text: ''
        }
    }

    render() {
        const {text} = this.state
        return (
            <div>
                <input value={text}  onInput={linkState(this, 'text')} type="text" />
            </div>
        )
    }
}

 

© 著作权归作者所有

爱吃柠檬的橘子
粉丝 6
博文 178
码字总数 84409
作品 0
芜湖
其他
2018 年值得尝试的 11 个 React 组件库

React 的普及似乎在不断增长,在 Stack overflow 2017 年最受欢迎的组件库中,React 处于领先地位:以下推荐 11 个可考虑在后续应用中使用的优秀 React 组件库,其中有一些已经十分流行,也有...

Janet_zyh ⋅ 2017/12/19 ⋅ 0

值得在 2018 年尝试的 11 个 React 组件库

React 的普及似乎在不断增长,在 Stack overflow 2017 年最受欢迎的组件库中,React 处于领先地位: React 的虚拟 DOM,声明性地描述用户界面和模拟界面状态的能力,以及相对较低的门槛,都使...

开源中国 ⋅ 2017/12/01 ⋅ 0

悲惨的安装过程——redhat7安装ns2.33

本次安装分为两大部分:解决依赖性和更改配置文件 一、解决依赖性安装 问题1 解决 问题2 解决 二、更改文件 问题3 解决 问题4 解决 问题5 解决 问题6 解决 终于安装成功!!!!快让我插会儿...

知微不知更 ⋅ 01/06 ⋅ 0

在 React 中运行 Vue--react-vue

React-Vue旨在连接 React 和 Vue,帮助您在 React 中运行 Vue。 用途: 使用Vue 的 Reactivity 系统来观察React组件 使用 react-vue-loader 以在React应用中运行Vue组件 Reactivity 系统 感谢...

匿名 ⋅ 2017/06/16 ⋅ 1

聊聊 React Router v4 的设计思想

React Router v4 发布已经有几个月了,但好像并没有得到太多人的青睐,大家(包括我们团队自己)还是习惯使用v2、v3版本。这一方面是因为v4版本是一次破坏性的升级,从v2、v3 升级到v4,必需...

苍山沭河 ⋅ 2017/08/06 ⋅ 0

在 Angular 中使用 React 组件的开源库--NgReact

React.js库可以用作Web应用程序中的视图组件。 ngReact 让你可以在 AngularJS 应用程序中使用 React 组件。 作用: 您需要比 Angular 更高的性能,而由于虚拟 DOM 和其他优化,React通常性能...

匿名 ⋅ 2017/06/16 ⋅ 0

React特性精华

以下内容是我在学习和研究React时,对React的特性、重点和注意事项的提取、精练和总结,可以做为React特性的字典,方便大家查阅; 目录 内容 1. 性能优化 虽然 props 由React本身设置以及 st...

科研者 ⋅ 2017/10/07 ⋅ 0

鹅厂优文 | ReactJS一点通

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 作者:卢文喆 腾讯云 UI工程师 导语 | 当React 刚开始红的时候,一直觉得 JSX 的设计思想极其独特,属于革命性的创新,它性能出众...

腾讯云加社区 ⋅ 06/06 ⋅ 0

基于百度地图 api 封装的 React 组件库--React-BMap

React-BMap 基于百度地图JavaScript Api封装的React组件库,使用这个库最好需要先了解React和百度地图JavaScript Api。 React-BMap只是利用了React组件的生命周期,来调用对应的百度地图Jav...

Kai_Ni ⋅ 2017/07/04 ⋅ 0

ReactJS学习笔记——组件复合及表单的处理

ReactJS学习笔记——组件复合及表单的处理 React是一个JavaScript库文件,使用它的目的在于能够解决构建大的应用和数据的实时变更。该设计使用JSX允许你在构建标签结构时充分利用JavaScript的...

小米墨客 ⋅ 2016/03/26 ⋅ 3

没有更多内容

加载失败,请刷新页面

加载更多

下一页

SpringBoot集成Druid的最简单的小示例

参考网页 https://blog.csdn.net/king_is_everyone/article/details/53098350 建立maven工程 Pom文件 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM......

karma123 ⋅ 55分钟前 ⋅ 0

Java虚拟机基本结构的简单记忆

Java堆:一般是放置实例化的对象的地方,堆分新生代和老年代空间,不断未被回收的对象越老,被放入老年代空间。分配最大堆空间:-Xmx 分配初始堆空间:-Xms,分配新生代空间:-Xmn,新生代的大小一...

算法之名 ⋅ 今天 ⋅ 0

OSChina 周日乱弹 —— 这么好的姑娘都不要了啊

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @TigaPile :分享曾惜的单曲《讲真的》 《讲真的》- 曾惜 手机党少年们想听歌,请使劲儿戳(这里) @首席搬砖工程师 :怎样约女孩子出来吃饭,...

小小编辑 ⋅ 今天 ⋅ 7

Jenkins实践3 之脚本

#!/bin/sh# export PROJ_PATH=项目路径# export TOMCAT_PATH=tomcat路径killTomcat(){pid=`ps -ef | grep tomcat | grep java|awk '{print $2}'`echo "tom...

晨猫 ⋅ 今天 ⋅ 0

Spring Bean的生命周期

前言 Spring Bean 的生命周期在整个 Spring 中占有很重要的位置,掌握这些可以加深对 Spring 的理解。 首先看下生命周期图: 再谈生命周期之前有一点需要先明确: Spring 只帮我们管理单例模...

素雷 ⋅ 今天 ⋅ 0

zblog2.3版本的asp系统是否可以超越卢松松博客的流量[图]

最近访问zblog官网,发现zlbog-asp2.3版本已经进入测试阶段了,虽然正式版还没有发布,想必也不久了。那么作为aps纵横江湖十多年的今天,blog2.2版本应该已经成熟了,为什么还要发布这个2.3...

原创小博客 ⋅ 今天 ⋅ 0

聊聊spring cloud的HystrixCircuitBreakerConfiguration

序 本文主要研究一下spring cloud的HystrixCircuitBreakerConfiguration HystrixCircuitBreakerConfiguration spring-cloud-netflix-core-2.0.0.RELEASE-sources.jar!/org/springframework/......

go4it ⋅ 今天 ⋅ 0

二分查找

二分查找,也称折半查找、二分搜索,是一种在有序数组中查找某一特定元素的搜索算法。搜素过程从数组的中间元素开始,如果中间元素正好是要查找的元素,则搜素过程结束;如果某一特定元素大于...

人觉非常君 ⋅ 今天 ⋅ 0

VS中使用X64汇编

需要注意的是,在X86项目中,可以使用__asm{}来嵌入汇编代码,但是在X64项目中,再也不能使用__asm{}来编写嵌入式汇编程序了,必须使用专门的.asm汇编文件来编写相应的汇编代码,然后在其它地...

simpower ⋅ 今天 ⋅ 0

ThreadPoolExecutor

ThreadPoolExecutor public ThreadPoolExecutor(int corePoolSize, int maximumPoolSize, long keepAliveTime, ......

4rnold ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部