React中类组件子组件向Hooks父组件传递状态的问题

嘿，我看了你的代码，问题其实很清晰——你已经想到了用回调来实现子向父传值，但细节上没做对，而且完全不用重构任何组件，调整几处代码就能搞定！

先说说当前的问题出在哪：

• 你的子组件Location根本没调用父组件传过来的onChange回调，所以父组件里的lat和lng一直是初始的null，提交自然拿不到值
• 父组件里的onChange写法也不对，setLat(e.target.value) && setLng(e.target.value)这种方式既拿不到两个不同的值，而且setState是异步的，用&&连接也没有意义

下面是具体的修复步骤：

第一步：修正父组件的回调逻辑和表单绑定 #

把父组件里的Location组件调用和表单的onSubmit绑定改一下：

// 父组件Post的return部分修改
return (
  <div>
    {/* 把onSubmit绑定在form标签上，而不是submit按钮上 */}
    <form onSubmit={submitHandle}>
      {/* Title form: */}
      <label>
        Title:
        <input
          name="title"
          type="text"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
        />
      </label>
      {/* Geolocation: 把回调改成接收lat和lng的函数，名字也更语义化 */}
      <Location
        onLocationChange={(lat, lng) => {
          setLat(lat);
          setLng(lng);
        }}
      />
      <input type="submit" />
    </form>
  </div>
);

这里注意：表单的onSubmit必须绑定在<form>标签上，绑定在提交按钮上是不会触发的，这也是你之前可能遇到的小坑。

第二步：让子组件主动触发父组件的回调 #

修改子组件Location的componentDidMount方法，在获取到地理位置后，调用父组件传过来的onLocationChange回调，把坐标传过去：

componentDidMount() {
  window.navigator.geolocation.getCurrentPosition(
    (position) => {
      const lat = parseFloat(position.coords.latitude);
      const lng = parseFloat(position.coords.longitude);
      this.setState({ lat, lng });
      // 触发父组件的回调，传递获取到的坐标
      if (this.props.onLocationChange) {
        this.props.onLocationChange(lat, lng);
      }
    },
    (err) => {
      console.log(err);
      // 可以把错误信息存到state里，方便展示给用户
      this.setState({ errorMessage: err.message });
    }
  );
}

另外，子组件里的隐藏<input>其实可以不用了，因为父组件已经通过回调拿到了lat和lng的状态，不过如果你需要表单自动收集数据的话，保留也没问题，不影响逻辑。

为什么这样可行？ #

其实不管父组件是函数式Hooks组件还是类组件，子组件是类组件还是函数组件，通过props传递回调函数实现子向父传值的逻辑都是通用的。类组件一样可以调用父组件传过来的回调，把内部状态传递出去，不需要特意重构组件。

这样修改后，父组件的lat和lng就能在子组件获取到地理位置后更新，提交表单时就能正确把数据传给服务器了。

备注：内容来源于stack exchange，提问作者Jo_K