React+Office UI Fabric：InputChildren无法触发onSubmit/onClick事件

我来帮你拆解下这个问题，大概率是两个核心原因导致的，咱们一步步捋：

1. Ref 指向错误，拿不到输入框的真实值 #

你给自定义的 <InputChildren> 加了 ref，但这个 ref 默认指向的是 InputChildren 组件的实例，不是它内部的原生 <input> 元素。所以当你在 onMessageSubmit 里访问 this.message.value 时，拿到的其实是 undefined，函数里的 if (!input.value) 直接触发 return，看起来就像函数没执行一样——但实际上函数已经跑了，只是提前退出了。

解决办法： #

• 如果是函数组件封装的 InputChildren，用 React.forwardRef 把外部传入的 ref 转发到内部的原生 input 上：

const InputChildren = React.forwardRef((props, ref) => {
  // 把ref绑定到内部的原生input
  return <input ref={ref} {...props} />;
});

• 如果是类组件封装的 InputChildren，可以在组件内部给原生 input 加 ref，然后通过暴露方法（比如 getValue()）或者 props 回调的方式，让外部获取输入值，替代直接拿组件实例的 value。

2. 自定义 IconButton 的事件/类型配置问题 #

两种场景的排查点： #

• 用 form 包裹的情况：原生 button 默认 type 是 submit，但你的自定义 IconButton 内部的 button 如果没设置 type="submit"，点击它不会触发 form 的 onSubmit 事件。需要给内部的原生 button 加上 type="submit"，这样点击按钮就能触发 form 的提交逻辑。
• 直接绑 onClick 的情况：要确认 IconButton 有没有把外部传入的 onClick 正确传递到内部的原生 button 上。比如内部的 button 必须绑定 onClick={props.onClick}，否则外部的点击事件不会生效。

快速验证小技巧 #

你可以在 onMessageSubmit 函数的最开头加一句调试代码：

console.log('函数执行了', input?.value);

这样就能快速判断：函数到底有没有被触发？输入值是不是拿不到？能帮你更快定位问题所在。

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