文档章节

React 使用 linkState 组件

lemos
 lemos
发布于 2017/09/07 10:00
字数 181
阅读 27
收藏 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>
        )
    }
}

 

© 著作权归作者所有

共有 人打赏支持
lemos
粉丝 6
博文 177
码字总数 86701
作品 0
芜湖
后端工程师
悲惨的安装过程——redhat7安装ns2.33

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

知微不知更
01/06
0
0
2018 年值得尝试的 11 个 React 组件库

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

Janet_zyh
2017/12/19
0
0
值得在 2018 年尝试的 11 个 React 组件库

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

开源中国
2017/12/01
0
0
React 回忆录(三)使用 React 渲染界面

Hi 各位,欢迎来到 React 回忆录!👋 在上一章中,我介绍了 React 框架的“五大特点”:虚拟DOM,组件化,声明式代码,单向数据流和纯粹的 JavaScript 语法。在本章中,我们将谈到 React ...

libinfs
07/17
0
0
前端神器:一行命令,React 组件转 Vue 组件!

基于目前React和Vue比较火,开发react-to-vue工具的目的是为了进一步提高组件的可复用用性,让组件复用不仅仅局限在一个框架里面 简介 对于react-to-vue工具,转化的是基本的react component...

cacao111
07/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

idea新建springCloud项目(5)- 订单服务

1.创建订单api,如下: 2.创建订单实现逻辑 3.新建订单、订单商品表 -- 订单 create table `order_master` ( `order_id` varchar(32) not null, `buyer_name` varchar(32) not null comment......

monroeCode
19分钟前
1
1
游戏开发经验谈(二):对战类全球服游戏的设计与实现

上篇文章《游戏开发经验谈(一):游戏架构里隐藏的五个坑及其应对方案》,我们主要讲解了游戏架构设计当中隐藏的一些坑及其应对方案,错过的小伙伴可以回溯之前的内容。本期内容,将会重点介...

UCloudTech
29分钟前
0
0
Mysql基本语法

一.联合主键 drop table CONTENT_AND_CATALOG;CREATE TABLE `tobebetter`.`CONTENT_AND_CATALOG` ( `ID` VARCHAR(120) NOT NULL , `CONTENT_ID` VARCHAR(120) , `CA......

我是菜鸟我骄傲
30分钟前
0
0
179. centos7 安装mariadb

1. centos7 中安装mariadb 1.1 执行安装 centos7 自带了mariadb yum -y install mariadb mariadb-server 1.2 启动mariadb systemctl start mariadb 1.3 设置开机启动 systemctl enable maria......

Lucky_Me
37分钟前
0
0
【AI实战】动手训练自己的目标检测模型(YOLO篇)

在前面的文章中,已经介绍了基于SSD使用自己的数据训练目标检测模型(见文章:手把手教你训练自己的目标检测模型),本文将基于另一个目标检测模型YOLO,介绍如何使用自己的数据进行训练。 ...

雪饼
44分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部