How to disable input field based on check-box in a redux form?

Viewed 1720

I want a custom redux form field where I can enable/disable input based on a checkbox that is checked. I do not want two fields for the redux form and want it to be a single field. Is this possible?

I have a list of such inputs and it seems like too much of an overhead to have 2 components one checkbox and the other input for each of these inputs.

I am interested in having just the value the user types(if any) in the store. I am trying to do something like this but this is failing.

My component:-

class formRenderCheckedInputField extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isChecked: true,
        };
    }
    toggleChange = () => {
        this.setState({
            isChecked: !this.state.isChecked,
        });
    }
    render() {
        return (
            <Checkbox
                name="checkbox"
                title={this.props.label}
                value={this.props.checked}
                onChange={this.toggleChange}
            />
            <FormGroup>
                <input
                    type={this.props.type}
                    placeholder={this.props.placeholder}
                    disabled={!this.state.isChecked}
                    {...this.props.input} />
            </FormGroup>


        );
    }
}

export default connect()(formRenderCheckedInputField)

formRenderCheckedInputField.propTypes  = {
    input: PropTypes.object,
    label: PropTypes.string,
    type: PropTypes.string,
    placeholder: PropTypes.string,

};

I am trying to call my redux form with the following field

<Field name="default"
    type="text"
    label="default"
    className="default"
    placeholder="default"
    component={formRenderCheckedInputField} />

Can some one guide me on how to do this?

Thanks

0 Answers
Related