1

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?

Mikhail Kostiuchenko
  • 9,121
  • 4
  • 15
  • 28

0 Answers0