反应:选中复选框时将值从一个输入字段复制到另一个输入字段

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

本文关键字：输入 字段 一个 另一个 复制 复选框 反应      更新时间：2023-09-26

我有一个表单，其中我有两个地址字段组（将其视为送货和账单地址）。我想为用户提供在选中"账单地址与送货地址相同"复选框时将值从一个组复制到另一个组的机会。

我的代码如下所示：

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未定义。

即使这样，如果这有效，我将如何从上层表单组中获取值？

感谢您的帮助！

-汞

我的一些初始问题可以通过将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}

现在，如果我们把它留在那里，用户就无法对表单进行任何更改，因此我们必须使用 handleChange 函数连接 onChange 属性。因为我不想为 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等效于我们用来设置状态值的键。 e.target.value捕获用户输入。 Object.assign用于避免直接与状态混淆（应将其视为不可变）。此处提供了有关操作状态时的问题的重要指导

复制内容非常简单：

_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" ... />

不确定这有多"准确"——如果您有反馈，请告诉我！

相关文章：