Skip to content

Instantly share code, notes, and snippets.

@Bazze Bazze/Input.jsx
Last active Jan 25, 2017

Embed
What would you like to do?
I use this class as drop-in replacement for the "Input" class after it got deprecated in react-bootstrap version 0.29.0.
import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { FormGroup, ControlLabel, FormControl, HelpBlock } from 'react-bootstrap';
class Input extends React.Component {
static propTypes = {
children: PropTypes.any,
help: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
id: PropTypes.string,
label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
type: PropTypes.string.isRequired,
};
getValue() {
const inputNode = ReactDOM.findDOMNode(this.refs.formControl);
if (this.props.type === 'select' && inputNode.multiple) {
return this.getMultipleSelectValues(inputNode);
}
return inputNode.value;
}
getMultipleSelectValues(selectNode) {
const values = [];
const options = selectNode.options;
for (let i = 0; i < options.length; i++) {
const opt = options[i];
if (opt.selected) {
values.push(opt.value || opt.text);
}
}
return values;
}
render() {
const { id, label, help, children, ...props } = this.props;
if (props.type === 'select' || props.type === 'textarea') {
props.componentClass = props.type;
delete props.type;
}
return (
<FormGroup controlId={id}>
{label && <ControlLabel>{label}</ControlLabel>}
<FormControl ref="formControl" {...props}>{children}</FormControl>
{help && <HelpBlock>{help}</HelpBlock>}
</FormGroup>
);
}
}
export default Input;
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.