React 使用 linkState 组件

绑定事件到状态

官方实现

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>
        )
    }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!