文档章节

React 使用 linkState 组件

lemos
 lemos
发布于 2017/09/07 10:00
字数 181
阅读 28
收藏 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
博文 179
码字总数 91193
作品 0
芜湖
后端工程师
私信 提问
悲惨的安装过程——redhat7安装ns2.33

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

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

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

开源中国
2017/12/01
0
0
2018 年值得尝试的 11 个 React 组件库

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

Janet_zyh
2017/12/19
0
0
如何写出更好的 React 代码?

译者 jonjia 爱贝睿技术团队 使用 React 可以轻松创建交互式界面。为应用中的每个状态设计简单的视图,当数据变化时,React 会高效地更新和渲染正确的组件。 这篇文章中,我会介绍一些使你成...

爱贝睿技术团队
08/24
0
0
在 React 中运行 Vue--react-vue

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

匿名
2017/06/16
195
1

没有更多内容

加载失败,请刷新页面

加载更多

最重要的是做什么,而不是怎么做。

最重要的是做什么,而不是怎么做。 做什么是战略,怎么做是战术。将军下令说,天黑前拿下这座山头,这是战略。手下的士兵可以不知道为什么要拿下这座山头,还非得是天黑之前,但士兵必须知道...

我是菜鸟我骄傲
50分钟前
0
0
w, vmstat, top, sar, nload命令查看系统状态信息

w/uptime 查看系统负载 cat /proc/cpuinfo 查看cpu核数 vmstat 监控系统状态,用法 vmstat 1,关键的几列: r, b, swpd, si, so, bi, bo, us, wa top 查看进程使用资源情况 top -c 显示详细的...

野雪球
今天
2
0
小白创建一个spring boot项目

进入 https://start.spring.io/

lilugirl
今天
3
0
Alibaba Java诊断利器Arthas实践--使用redefine排查应用奇怪的日志来源

背景 随着应用越来越复杂,依赖越来越多,日志系统越来越混乱,有时会出现一些奇怪的日志,比如: [] [] [] No credential found 那么怎样排查这些奇怪的日志从哪里打印出来的呢?因为搞不清...

hengyunabc
今天
2
0
home hosts

home hosts lwk@qwfys:~$ cat /etc/hosts127.0.0.1 localhost127.0.1.1 qwfys192.168.56.101vm600.qwfys.com39.108.212.91alpha1.ppy.com39.108.117.122alpha2.p......

qwfys
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部