如何让Form.Input自动赋值selectedProfile时触发onChange函数？

首先得明确一点：React的受控组件里，通过代码修改value属性并不会触发原生的onChange事件——这个事件只在用户手动输入、选择等交互操作时才会触发。所以你遇到的情况是正常的，我们需要换个方式来触发onCustomerFieldUpdate逻辑。

下面给你两种可行的方案：

方案一：利用生命周期钩子监听selectedProfile变化（类组件适用） #

因为你的代码看起来是类组件（用了this.onCustomerFieldUpdate），可以用componentDidUpdate钩子来检测selectedProfile的变化，当它从nil变为有值时，手动调用你的更新函数：

componentDidUpdate(prevProps, prevState) {
  // 检测selectedProfile是否从无到有，或者发生了变化
  if (!_.isNil(this.props.selectedProfile) && _.isNil(prevProps.selectedProfile)) {
    // 调用onCustomerFieldUpdate，模拟用户输入的参数格式
    this.onCustomerFieldUpdate({
      target: {
        name: 'firstName',
        value: this.props.selectedProfile.first_name
      }
    });
  }
}

这样只要selectedProfile被赋值，就会自动触发你的字段更新逻辑，和用户手动输入时的效果一致。

方案二：在设置selectedProfile的地方直接调用更新函数 #

如果你是在某个事件或接口请求后设置的selectedProfile，那可以在设置完这个值之后，立刻调用onCustomerFieldUpdate：

// 假设你是这样设置selectedProfile的
fetchProfile().then(profile => {
  this.setState({ selectedProfile: profile });
  // 手动触发更新
  this.onCustomerFieldUpdate({
    target: {
      name: 'firstName',
      value: profile.first_name
    }
  });
});

这种方式更直接，但如果selectedProfile的来源比较多（比如多个地方都可能设置它），方案一的生命周期监听会更省心。

补充说明 #

不管用哪种方案，都要注意避免重复触发：比如在方案一中，最好加上判断，只有当selectedProfile确实发生变化时才调用函数，不然可能会因为其他props/state变化导致重复执行。

另外，如果你后续迁移到函数组件，可以用useEffect钩子来实现类似的监听逻辑：

useEffect(() => {
  if (!_.isNil(selectedProfile)) {
    onCustomerFieldUpdate({
      target: {
        name: 'firstName',
        value: selectedProfile.first_name
      }
    });
  }
}, [selectedProfile]); // 依赖selectedProfile，只有它变化时才执行

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