util-react

react项目中使用的工具集

安装

$ npm install -g util-react

在线DEMO

genInputGetter

Form

使用文档

createApp(component[,htmlElement])

创建一个App类，用于渲染React组件

• component React组件
• htmlElement HTMLElement, 需要渲染的DOM节点

返回 App类的对象

Class:App

create()

通过ReactDOM.render渲染组件

getIns()

获取单例，只有第一次执行时会通过ReactDOM.render渲染组件

example

import {createApp} from 'util-react'
import React from 'react'
function Demo () {
    return <div>demo</div>
}

createApp(Demo).getIns() 

genInputGetter(context, key[, valueGetter[, opts]])

类似input组件的值变化时，同步更新React组件内部的state

context

React组件的实例对象

key

指定与input组件绑定的state中的key，如inputValue， input.value

valueGetter(event)

从event中获取input组件的值，默认为 event => event.target.value

opts

onChange(value, event)

input组件值变化时触发，value为valueGetter中获取的值。此时key指定的变量的值未更新

callback

input组件值变化后，会通过setState更新key中声明的变量。callback为setState的回调，此时key指定的变量的值已更新

example

import {genInputGetter} from 'util-react'
import React, {Component} from 'react'

class Demo extends Component {
    constructor (opts) {
        super(opts)
        this.state = {
            input: {
                value: ''
            }
        }
    }

    render () {
        return (
            <div>
                <input 
                    type="text" 
                    onChange={genInputGetter(this, 'input.value', event => event.target.value, this.onInputChange)} />
                <div>{this.state.input.value}</div>
            </div>
        )
    }

    onInputChange (...args) {
        console.log(args)
    }
}

Class:Form

Form组件会对它包容的元素进行处理，对其中特定的元素进行取值，在内部提交事件发生后，会执行this.props.onChange，对外提供收集到的数据。

收集数据

为元素添加属性name，Form组件会为其添加onChange属性，来收集该元素的值。getter属性声明如何通过onChange收集值(默认值为val => val)。

提交

为元素添加immediate属性，声明该元素每次值的变化都会触发Form组件的提交事件。

为元素添加属性submit，Form组件会为其添加onClick属性。onClick触发时会触发Form组件的提交事件。

初始化数据

为Form组件添加defaultValue属性来初始化Form组件内部的值 为Form组件添加value属性来绑定Form组件内部的值

demo

<Form defaultValue={{abc: '456'}} onChange={val => console.log(val)}>
    <input immediate name="abc" getter={event => event.target.value}></input>
    <div>
        <input name="password" placeholder="password" getter={event => event.target.value} onChange={this.onChange.bind(this)}></input>
    </div>
    <button submit>search</button>  
</Form>