Skip to content

Instantly share code, notes, and snippets.

@tricoder42 tricoder42/Input.jsx

Created Nov 23, 2015
Embed
What would you like to do?
Usage of `uncontrollable`
const PureInput = React.createClass({
propTypes: {
name: React.PropTypes.string.isRequired,
label: React.PropTypes.string,
type: React.PropTypes.string,
placeholder: React.PropTypes.string,
// value/callback pair
value: React.PropTypes.string,
onChange: React.PropTypes.func.isRequired,
focused: React.PropTypes.bool,
onFocus: React.PropTypes.func.isRequired,
},
getDefaultProps(): Object {
return {
type: "text",
focused: false,
};
},
render(): React.Element {
const fieldClass = cx(
"field", {
"field-focus": this.props.focused || !!this.props.value
}
);
return (
<div className={fieldClass}>
<label className="field__label">
{this.props.label}
</label>
<input
className="field__input"
type={this.props.type}
name={this.props.name}
value={this.props.value}
placeholder={this.props.placeholder}
onChange={(event) => this.props.onChange(event.target.value)}
onFocus={() => this.props.onFocus(true)}
onBlur={() => this.props.onFocus(false)}
/>
</div>
);
}
});
const Input = uncontrollable(
PureInput,
{
value: "onChange",
focused: "onFocus",
}
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.