React.js表单问题：勾选复选框后实际地址未同步至变量

嘿，我懂你遇到的麻烦了——勾选复选框后，实际地址输入框能显示注册地址，但这个值没存在组件的变量里，对吧？核心问题出在你当前的实现没有把addressActual和组件的state绑定，只是在return前临时赋值了一个变量，这个变量并没有被存在组件的状态中，所以控制台能输出值，但后续根本拿不到这个数据。

下面是具体的修复方案，咱们一步步来：

1. 确保所有表单字段都存在state里 #

首先，你的组件state应该包含checked、passportAddress和addressActual这三个字段，初始状态可以这样写：

state = {
  checked: false,
  passportAddress: '',
  addressActual: ''
}

2. 修改复选框的触发方法，直接更新state里的地址值 #

把你原来的checkBoxAddress方法改成这样，勾选时直接把passportAddress的值同步到addressActual的state中：

checkBoxAddress = () => {
  this.setState(prevState => ({
    checked: !prevState.checked,
    // 勾选时同步注册地址到实际地址，取消勾选可以选择清空或者保留用户之前输入的内容，这里我写的是清空，你可以按需调整
    addressActual: !prevState.checked ? prevState.passportAddress : ''
  }));
}

3. 处理注册地址修改时的同步逻辑 #

如果用户在勾选状态下修改了注册地址，实际地址也应该跟着同步更新，所以要在你的changeHandler里加判断：

changeHandler = (e) => {
  const { name, value } = e.target;
  this.setState(prevState => {
    const updatedState = { [name]: value };
    // 当复选框是勾选状态，且修改的是注册地址时，同步更新实际地址
    if (prevState.checked && name === 'passportAddress') {
      updatedState.addressActual = value;
    }
    return updatedState;
  });
}

4. 调整表单代码，绑定state并优化体验 #

把表单里的value直接绑定到state的对应字段，另外可以给实际地址输入框加个disabled属性，勾选时禁止用户输入，避免冲突：

<div className="form-group col-md-12">
  <input 
    name="passportAddress" 
    type="text" 
    className="form-control" 
    placeholder="Адрес прописки" 
    value={this.state.passportAddress} 
    onChange={this.changeHandler}
  />
</div>
<div className="form-check">
  <div className="form-group">
    <input 
      className="form-check-input" 
      type="checkbox" 
      id="gridCheck" 
      onChange={this.checkBoxAddress} 
      checked={this.state.checked} {/* 这里用checked代替defaultChecked，做成受控组件 */}
    />
    <label className="form-check-label" htmlFor="gridCheck"> 
      Адрес прописки совпадает с почтовым 
    </label>
  </div>
</div>
<div className="form-row">
  <div className="form-group col-md-12">
    <input 
      name="addressActual" 
      type="text" 
      className="form-control" 
      placeholder="Адрес почтовый" 
      value={this.state.addressActual} 
      onChange={this.changeHandler}
      disabled={this.state.checked}
    />
  </div>
</div>

这样改完之后，addressActual的值就会存在组件的state里了，不管是勾选同步还是后续提交，都能正确拿到这个值。核心思路就是React表单要用受控组件的方式，所有表单值都和state绑定，修改都通过setState来完成，这样数据才是可靠的。

内容的提问来源于stack exchange，提问作者Nikita Biryukov