如何解决React内部组件onChange事件仅触发一次的问题

这是React开发中的典型反模式：你在App组件的渲染函数内部定义了TestComponent组件，两种渲染方式的差异本质是React对渲染元素的处理逻辑不同：

• 直接调用testFunction()返回JSX时，返回的testBlock是App组件渲染树的原生组成部分，和直接写在App return里的input、div没有区别，状态更新时会走正常的重渲染流程，因此滑块功能完全正常。
• 用<TestComponent />组件标签形式渲染时，React会将其识别为独立的子组件。每次App因为状态更新（比如滑块触发onChange修改valueS）重渲染时，都会创建一个全新的TestComponent函数引用。React做虚拟DOM对比时，发现前后两次渲染的子组件类型引用不一致，会直接卸载旧的TestComponent实例，再完整挂载全新的组件实例，不会走正常的组件更新流程。
• 滑块拖动是持续交互过程，第一次值变更触发App重渲染时，旧的滑块DOM随着旧TestComponent实例被卸载，当前拖拽操作绑定的DOM节点被销毁，后续滑动事件自然无法响应，表现为滑块仅能移动一次。

根据你的需求选择对应方案即可：

• 方案1：将子组件移到App组件外部定义，保证组件引用稳定，通过props传递需要的状态和回调。如果你要使用useSwipeable这类Hook，直接在外部定义的子组件顶层调用即可，符合Hook的调用规则。
  示例代码：

  import "./styles.css";
  import { useState } from "react";
  
  // 组件定义在外部，引用永远稳定
  function TestComponent({ value, onValueChange }) {
    // useSwipeable这类Hook可以直接在这里调用，符合规则
    return (
      <div>
        <h2>{value}</h2>
        <input
          type="range"
          value={value}
          onChange={(e) => onValueChange(e.target.value)}
          onMouseUp={() => console.log("slide complete by mouse")}
        />
      </div>
    );
  }
  
  export default function App() {
    const [valueS, setValueS] = useState(67);
  
    return (
      <div style={{ textAlign: "center" }}>
        <h1>COMPONENT/FUNCTION EVENTS</h1>
        <TestComponent value={valueS} onValueChange={setValueS} />
      </div>
    );
  }
  

• 方案2：如果你不需要拆分独立组件，只是想把一段渲染逻辑做分段封装，直接用普通函数返回JSX、在渲染时调用函数的写法就完全可用，useSwipeable直接在App组件顶层调用即可，不需要强行包一层内部组件。

注意：永远不要在组件的渲染函数内部定义新的子组件，否则不仅会出现交互失效的问题，还可能导致子组件状态丢失、重复触发挂载副作用等各类难以排查的异常。

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