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