Select
June 18, 2019 ยท View on GitHub
User-interactive component.
Select should be wrapped into FormGroup
Public interface
Props
Select contains html <select /> element. All props for <select /> are valid for Select.
Own props:
errorClassName- class that applies when model attribute is invalid. By default -has-error.focusClassName- class that applies when user-interactive element have focus. By default -has-focus.valueClassName- class that applies when model attribute have value. By default -has-value.nativeRef- callback for Reactref.Optional.children- should be a function that return valid component.Optional.options- array of itmes that should be displayed.Required.
Example
<Form
onSubmit={async (values) => await someRequest(values)}
validator={new SchemaValidator(ExampleSchema)}
errorParser={(error) => myCustomParser(error)}
>
<FormGroup attribute="counter" validateOn="blur">
<Select
options={[
{
value: 1,
label: "one"
},
{
value: 2,
label: "two"
}
]}
>
{(options, selected) => (
options.map((item) => (
<option
key={item.value}
value={item.value}
className={selected === item.value ? "active" : ""}
>
{item.label}
<option>
))
)}
</Select>
</FormGroup>
</Form>