Question

我有一个表单，其中我有两个地址字段组（将其视为送货地址和帐单邮寄地址）。我想让用户有机会在选中“结算地址与送货地址相同”复选框时将值从一个组复制到另一个组。

我的代码如下：

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

即便如此，如果有效，我如何从上层组中获取值？

感谢您的帮助！

- Hg

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等同于我们用于设置状态值的键。 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" ... />

不确定这是多么“反应” - 如果您有反馈，请告诉我！

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

1 个答案: