react-controlled

higher-order-component for react controlled components

Installation

npm install --save react-controlled

Example

simple case

import React from 'react';
import controlled from 'react-controlled';
 
class MyComponent extends React.Component {
    onClickSave = () => {
        const nickname = this.props.fields('nickname').value;
        const age = this.props.fields('age').value;
    }
    render() {
        return <div>
            <input type="text" {...this.props.fields('nickname')}/>
            <input type="text" {...this.props.fields('age')}/>
            <button onClick={this.onClickSave}>save</button>
        </div>;
    }
}
 
export default controlled(MyComponent)

with defaultValue

It is recommanded to set default value at constructor.

import React from 'react';
import controlled from 'react-controlled';
 
class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.props.fields({
            fieldName: 'nickname',
            defaultValue: 'no name',
        });
    }
    render() {
        return <div>
            <input type="text" {...this.props.fields('nickname')}/>
        </div>;
    }
}
 
export default controlled(MyComponent)

customize getValue function

default getValue function: args => args[0].target.value

import React from 'react';
import controlled from 'react-controlled';
 
class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.props.fields({
            fieldName: 'nickname',
            getValue: args => args[0],
        });
    }
    render() {
        return <div>
            <SomeComponent {...this.props.fields('nickname')}/>
        </div>;
    }
}
 
export default controlled(MyComponent)

getFieldValues, setFieldValues

import React from 'react';
import controlled from 'react-controlled';
 
class MyComponent extends React.Component {
    onClick = () => {
        const values = this.props.getFieldValues();
        values.nickname = 'my name is ' + values.nickname;
        values.age = 'my age is ' + values.age;
        this.props.setFieldValues(values);
    }
    render() {
        return <div>
            <input type="text" {...this.props.fields('nickname')}/>
            <input type="text" {...this.props.fields('age')}/>
            <button onClick={this.onClick}>example</button>
        </div>;
    }
}
 
export default controlled(MyComponent)