0.1.2 • Published 8 years ago
react-controlled v0.1.2
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 => args0.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)