React-Redux-Forms enable checkbox in another react component - reactjs

Question

I have given someone else's React project which is using the React-Redux-Form (this is not the redux-form) and there is a need to enable a checkbox which is on another React Component based upon a value being entered in a textbox in the React-Redux-Form. By defult the checkbox is disabled and should only be enabled if a value is present.
Searching on the Internet have failed to find an example in which to use. Can anyone help?

Answer 1

Here is a very rough example, and is not intended to run - simply show the flow of how to do it:
The component with the input field might have something like:
//1) this is setting a local state, when the user submits you can send it to redux so that it is available across the app.
this._saveInputToLocal() {
var emailRegEx = /^.+#.+\..+$/i;
this.setState({
email: e.target.value
}, function() {
}.bind(this));
},
//2) when the user clicks submit - send the input to redux
//lets assume this is saved into a property on state called `formInput`:
this._saveInputToRedux() {
const = { dispatch }
dispatch(saveUserInput(this.state.email))
},
render: function(){
return (
<div className={`field email ${css(styles.emailContainer)}`}>
<input
type='email'
placeholder={ 'helloworld#code.com' }
onChange={this._saveEmailToState}
/>
</div>
<button type='submit' onClick={this._saveInputToRedux}>Submit</button>
)
}
});
So you see, you have a few things: a function that updates a local state, and one that handles the submit - where the value of the local state fires and action that will store that value in redux. Don't forget to import connect so that you have dispatch available to you on props, and also don't forget to import your action into the component.
Now, In the other component that has the checkbox:
// 3) assuming you have mapped your redux state to your props you make a function that checks for a valid input value:
this._hasValidValue() {
const { formInput } = this.props
return formInput && formInput !== null && formInput !== undefined && formInput.length > 0
}
//here in the render you display either an enabled or disabled checkbox based on if you have a valid input from the other component. Because this is based on state, this component will re-render when state is updated (goes from invalid to valid or vice versa)
render: function(){
return (
<div className="checkbox">
{ hasValidValue()
? <input type="checkbox" name="some-name" />
: <input type="checkbox" name="some-name" disabled/>
}
)
}
});