We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
|
const formikEnhancer = withFormik({
validationSchema: Yup.object().shape({
valid: Yup.string().required("Value is required!")
}),
mapPropsToValues: props => ({
valid: []
}),
handleSubmit: (values, { setSubmitting }) => {
setSubmitting(false);
},
displayName: "MyForm"
});
const MyForm = props => {
const {
values,
touched,
errors,
handleSubmit,
setFieldValue,
setFieldTouched,
isSubmitting
} = props;
return (
<form onSubmit={handleSubmit}>
<MySelect value={values.valid}
onChange={setFieldValue}
onBlur={setFieldTouched}
error={errors.valid}
touched={touched.valid} />
<button type="submit" disabled={isSubmitting}>
Submit
</button>
</form>
);
};
const options = [
{ Id: "Game1", Game: "American Football" },
{ Id: "Game2", Game: "Badminton" },
{ Id: "Game3", Game: "Basketball" },
{ Id: "Game4", Game: "Cricket" },
{ Id: "Game5", Game: "Football" },
{ Id: "Game6", Game: "Golf" },
{ Id: "Game7", Game: "Hockey" },
{ Id: "Game8", Game: "Rugby" },
{ Id: "Game9", Game: "Snooker" },
{ Id: "Game10", Game: "Tennis" }
];
const field = { text: "Game", value: "Game" };
class MySelect extends React.Component {
handleChange = args => {
this.props.onChange("valid", args.value);
};
handleBlur = () => {
this.props.onBlur("valid", true);
};
render() {
return (
<div style={{ margin: "1rem 0" }}>
<div id="multi">
<h4> MultiSelect </h4>
<DropDownListComponent id="select"
dataSource={options}
mode="Default"
fields={field}
value={this.props.value}
change={this.handleChange}
blur={this.handleBlur}
placeholder="Select a game"
popupHeight="220px" />
</div>
{!!this.props.error && this.props.touched && (
<div style={{ color: "red", marginTop: ".5rem" }}>
{this.props.error}
</div>
)}
</div>
);
}
} |
