Support selects on Field
Luckily, the styling is copy/paste capable.
This commit is contained in:
parent
b25c2efec5
commit
f0e8182ff3
2 changed files with 21 additions and 11 deletions
|
@ -27,6 +27,9 @@ export default class Field extends React.PureComponent {
|
|||
label: PropTypes.string,
|
||||
// The field's placeholder string.
|
||||
placeholder: PropTypes.string,
|
||||
// The type of field to create. Defaults to "input". Should be "input" or "select".
|
||||
// To define options for a select, use <Field><option ... /></Field>
|
||||
element: PropTypes.string,
|
||||
// All other props pass through to the <input>.
|
||||
}
|
||||
|
||||
|
@ -38,13 +41,13 @@ export default class Field extends React.PureComponent {
|
|||
delete extraProps.type;
|
||||
delete extraProps.placeholder;
|
||||
delete extraProps.label;
|
||||
delete extraProps.element;
|
||||
|
||||
const element = this.props.element || "input";
|
||||
const fieldInput = React.createElement(element, extraProps, this.props.children);
|
||||
|
||||
return <div className="mx_Field">
|
||||
<input id={this.props.id}
|
||||
type={this.props.type || "text"}
|
||||
placeholder={this.props.placeholder}
|
||||
{...extraProps}
|
||||
/>
|
||||
{fieldInput}
|
||||
<label htmlFor={this.props.id}>{this.props.label}</label>
|
||||
</div>;
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue