In my react app I have generic Input component:
class Input extends Component {
constructor(props) {
super(props);
if (props) {
this.state = {
elementType: props.elementType,
elementConfig: props.elementConfig,
cssClasses: props.cssClasses,
};
}
this.changeValue = this.changeValue.bind(this);
}
render() {
switch (this.state.elementType) {
case ('input'):
inputElement = <input
className={inputClasses.join(' ')}
{...this.state.elementConfig}
value={this.props.getValue() || ''}
onChange={this.changeValue} />;
break;
}
return (
<div className={requiredClass}>
{inputElement}
<span className={'text-danger'}>{requiredMessage}</span>
<span className={'text-danger'}>{errorMessage}</span>
</div>
);
}
}
Next, I use this group of inputs with react-formsy:
<Formsy>
<Input
requiredMessage='required'
required
name="checkbox"
elementType="input"
elementConfig={{ type: 'checkbox', id: 'check1'}}
cssClasses={['custom-input']}
/>
<button type="button" disabled={!this.props.canSubmit}></button>
</Formsy>
This checkboxes should be required, until they are checked, the button must be inactive. but the problem is that I can't check the checkboxes. I am new in react. Where is my mistake?