React: Copy values from one input field to another when checking checkbox
<p>I have a form in which I have two address field groups (think of it as shipping and billing address).
I want to offer the user the opportunity to copy values from one group into another when checking a checkbox "Billing address is the same as shipping address".</p>

<p>My code looks as follows:
<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>class PetitionForm extends React.Component {
    render() {
        return (
            &lt;Form 
                onValidSubmit={this._handleValidSubmit.bind(this)}
                onInvalidSubmit={this._handleInvalidSubmit.bind(this)}&gt;
                &lt;div className="panel panel-default"&gt;
                    &lt;div className="panel-heading"&gt;
                        &lt;h2 className="panel-title"&gt;Shipping Address&lt;/h2&gt;
                    &lt;/div&gt;
                    &lt;div className="panel-body"&gt;
                        &lt;ValidatedInput name="streetShip" type="text" label="Street" validate="required" errorHelp="Needs to be completed" groupClassName="col-sm-12"/&gt;
                        &lt;ValidatedInput name="zipShip" type="number" label="ZIP Code" validate="required" errorHelp="Needs to be completed" groupClassName="col-xs-4"/&gt;
                        &lt;ValidatedInput name="cityShip" type="text" label="City" validate="required" errorHelp="Needs to be completed" groupClassName="col-xs-8"/&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div className="panel panel-default"&gt;
                    &lt;div className="panel-heading"&gt;
                        &lt;h2 className="panel-title"&gt;Billing Address&lt;/h2&gt;
                    &lt;/div&gt;
                    &lt;div className="panel-body"&gt;
                        &lt;Input type="checkbox" ref="checkbox" name="sameCheck" label="Shipping address is billing address" onChange={this._copyAddress} /&gt;
                        &lt;ValidatedInput name="streetBill" type="text" label="Street" validate="required" errorHelp="Needs to be completed" groupClassName="col-sm-12" /&gt;
                        &lt;ValidatedInput name="zipBill" type="number" label="ZIP Code" validate="required" errorHelp="Needs to be completed" groupClassName="col-xs-4"/&gt;
                        &lt;ValidatedInput name="cityBill" type="text" label="Ciudad" validate="required" errorHelp="Needs to be completed" groupClassName="col-xs-8"/&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;ButtonInput type="submit" groupClassName="col-sm-12" /&gt;
            &lt;/Form&gt;
        );
    }

    _copyAddress() {
        this.refs.checkbox.getValue();
    }

    _handleValidSubmit(values) {
      // handle submit
    }

    _handleInvalidSubmit(errors, values) {
      // handle invalids
    }
}</code></pre>
</div>
</div>
</p>

<p>The <code>onChange={this._copyAddress}</code> is my desperate attempt to capture when the checkbox is being checked. <code>copyAddress</code> is being triggered, but <code>this.refs.checkbox</code> is undefined.</p>

<p>Even then if that worked, how would I get the values from the upper form group?</p>

<p>Thanks for your help!</p>

<p>- Hg</p>