I'm working on an input number with controllers (-/+) wrapped by redux form:
https://codesandbox.io/s/8l3qjxv2l9
I don't know how to make it work and update my value with the controllers. Now it works only onChange inside input.
My controllers could receive some external functions to update the value, but I don't know how. Of course, I'm not a ninja with redux and redux form.
Any ideas?
Thanks
Have you tried the onChange in your custom component? Take a look at the de api https://redux-form.com/6.6.3/docs/api/field.md/ when they talk "To learn what props will be passed to your component, see the Props section below."
import React, { Component } from "react";
import PropTypes from "prop-types";
class NumberInput extends Component {
static propTypes = {
input: PropTypes.any,
onChange: PropTypes.func,
min: PropTypes.number.isRequired,
max: PropTypes.number.isRequired,
label: PropTypes.string,
errorMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
};
static defaultProps = {
onDecrement: null,
onIncrement: null,
onChange: null,
errorMessage: false
};
render() {
const {
input,
onChange,
value,
min,
max,
label,
errorMessage
} = this.props;
let val = value || min;
// MAIN
return (
<div className="number-input__content">
<div>
<button
type="button"
onClick={() => onChange(val > min && value - 1)}
>
-
</button>
<input
type="number"
pattern="[0-9]"
defaultValue={min}
value={val}
min={min}
max={max}
onChange={onChange}
{...input}
/>
<button
type="button"
onClick={() => onChange(val < max && value + 1)}
>
+
</button>
</div>
</div>
);
}
}
export default NumberInput;
defaultValue because here I've a controlled input element: codesandbox.io/s/6nv8n6znyk