-
Notifications
You must be signed in to change notification settings - Fork 0
/
restrict-user-input-customOnChange.jsx
46 lines (41 loc) · 1.17 KB
/
restrict-user-input-customOnChange.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
import React from 'react';
import { Proforma, Form, Field } from 'react-proforma';
class RestrictUserInput extends React.Component {
renderForm() {
return (
<Form>
<div>
<label htmlFor="amount">Amount:</label>
<Field name="amount" />
</div>
</Form>
);
}
render() {
return (
<Proforma
config={{
initialValues: {
amount: ''
},
customOnChangeObject: {
amount: (event, setValues) => {
/* This function will be called instead of Proforma's own change handler */
const value = event.target.value;
/* Conditionally update view, only if input is a number */
if (value.length > 0) {
const pValue = parseFloat(value);
if (isNaN(pValue)) return;
}
/* The value passes the isNaN test, so update view */
setValues({ amount: value });
}
}
}}
handleSubmit={(values) => console.log(values)}
>
{this.renderForm}
</Proforma>
);
}
}