React：选中复选框时将值从一个输入字段复制到另一个输入字段

Question

我有一个表单，其中有两个地址字段组（将其视为送货地址和账单地址）。我想为用户提供在选中复选框 "Billing address is the same as shipping address".

时将值从一组复制到另一组的机会

我的代码如下所示：

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

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

    _handleValidSubmit(values) {
      // handle submit
    }

    _handleInvalidSubmit(errors, values) {
      // handle invalids
    }
}

onChange={this._copyAddress} 是我拼命尝试在选中复选框时进行捕获。 copyAddress 正在被触发，但 this.refs.checkbox 未定义。

即便如此，我如何从上层表格组中获取值？

感谢您的帮助！

- 汞

Answer 1

我最初遇到的一些问题可以通过将 this 绑定到 onChange 调用来解决：

onChange={this._copyAddress.bind(this)}

这样，我就可以访问 this.refs.checkbox。

为了复制值，我首先必须将值绑定到组件状态，将它们变成受控组件（参见 https://facebook.github.io/react/docs/forms.html）。

这意味着设置状态如下（我使用的是 ES6 类）：

class PetitionForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            values: {
                firstName: "",
                lastName: "",
                email: "",
                streetShip: "",
                zipShip: "",
                cityShip: "",
                streetBill: "",
                zipBill: "",
                cityBill: ""
            }
        };
    }
...
}

对于每个输入，我们现在必须添加 value-property：value={this.state.values.firstName}

现在，如果我们留在那里，用户将无法对表单进行任何更改，因此我们必须将 onChange 属性与 handleChange 连接起来功能。因为我不想为 9 个字段编写 9 个不同的处理程序，所以这是我的快捷方式：

handleChange(e) {
    var key = e.target.name;
    var obj = {};
    obj[key] = e.target.value;
    var updatedValues = Object.assign({}, this.state.values, obj);
    this.setState({values: updatedValues});
}

中的target.name相当于我们设置的state-values键。 e.target.value 捕获用户输入。 Object.assign 用于避免直接干扰状态（应该被视为不可变）。提供了有关操作状态时问题的重要指导 here

复制内容非常简单：

_copyAddress(e) {
    if(this.refs.copyAddress.getChecked()) {
        var obj = {
                streetBill: this.state.values.streetShip,
                zipBill: this.state.values.zipShip,
                cityBill: this.state.values.cityShip
        }
        var updatedValues = Object.assign({}, this.state.values, obj);
        this.setState({values: updatedValues});
    }
}

触发复制和示例输入字段的复选框现在如下所示：

<Input type="checkbox" name="copyAddress" ref="copyAddress" label="Same as shipping" onChange={this._copyAddress.bind(this)} />
<ValidatedInput name="streetBills" value={this.state.values.streetBills} onChange={this.handleChange.bind(this)} type="text" label="Street" ... />

不确定 "reactly" 这是怎么回事——如果您有反馈，请告诉我！

React：选中复选框时将值从一个输入字段复制到另一个输入字段

React: Copy values from one input field to another when checking checkbox

javascript

reactjs

react-bootstrap