为Styled-Component的Input加innerRef后，兄弟组件onAddNode函数失效

这问题我之前排查过好几次，大概率和Styled Components的ref传递机制以及你使用innerRef的方式有关，下面是几个最可能的原因和对应的解决办法：

1. 你可能在用新版本Styled Components却仍用旧版的innerRef写法 #

Styled Components从v4开始就支持原生的ref属性了——它底层用了React.forwardRef自动把ref转发到底层的DOM元素。如果你的项目是v4+版本，却还在使用innerRef，反而可能让包装组件的内部逻辑出现冲突，间接影响事件处理函数的执行。

解决办法：
直接把innerRef换成原生ref就行：

// 原来的代码
<StyledInput innerRef={this.setReference} />

// 修改后
<StyledInput ref={this.setReference} />

2. setReference函数里藏了干扰事件流的副作用 #

虽然你说setReference能正常存参数，但如果函数里还有其他操作（比如不小心改了组件状态、调用了DOM元素的blur/focus方法），可能会中断事件的执行流程。比如要是在setReference里调用了el.blur()，输入框的回车事件可能会被提前终止，自然触发不了onAddNode。

排查方式：
先把setReference里除了存ref的代码都注释掉，测试onAddNode能不能恢复正常：

setReference(el) {
  // 只保留存储ref的逻辑
  this.inputRef = el;
  // 其他代码先注释掉
}

3. ref绑定时机晚于事件触发，导致代码报错中断 #

如果你的onAddNode触发逻辑依赖输入框的DOM状态（比如拿输入值），但innerRef的赋值时机比事件触发晚，就会抛出错误，让后续代码（包括onAddNode）没法执行。比如组件第一次渲染时，回车事件触发了，但ref还没挂载，访问this.inputRef.value就会报Cannot read property 'value' of null，直接阻断流程。

解决办法：
要么在事件处理里先判断ref是否存在，要么更推荐直接通过事件对象拿值（完全不依赖ref）：

// 原来依赖ref的写法
handleKeyPress = (e) => {
  if (e.key === 'Enter') {
    const value = this.inputRef.value;
    this.props.onAddNode(value);
  }
}

// 修改后（通过事件对象取值，更可靠）
handleKeyPress = (e) => {
  if (e.key === 'Enter') {
    const value = e.target.value;
    this.props.onAddNode(value);
  }
}

4. 旧版Styled Components的innerRef可能导致事件上下文丢失 #

在v3及更早的Styled Components里，用innerRef时包装组件可能会意外改变事件处理函数的上下文。不过你说onAddNode是父组件传的，而且setReference已经绑定了上下文，这个概率不高，但可以试试下面的验证方法：

验证方式：
把事件处理改成箭头函数，或者在render里显式绑定上下文：

// 方式1：用箭头函数包裹
<StyledInput innerRef={this.setReference} onKeyPress={(e) => this.handleKeyPress(e)} />

// 方式2：显式绑定上下文
<StyledInput innerRef={this.setReference} onKeyPress={this.handleKeyPress.bind(this)} />

如果这些方法都没解决问题，建议贴一小段相关代码（比如Styled Input的定义、事件处理函数、setReference的完整代码），这样能更精准定位问题。

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