相关平台

H5

复现仓库

https://github.com/Rambos/taro-input-demo.git
浏览器版本: Chrome
使用框架: React

复现步骤

export default function Index () {
  const [focus, setFocus] = useState(false)
  useLoad(() => {
    console.log('Page loaded.')
  })

  // 如果添加了onFoucs事件，点击按钮获得焦点会出现flushSync渲染警告， 如果移除onFocus则正常
  const onFocus = () => {
    console.log('focus')
  }

  return (
    <View className='index'>
      <Text>Hello world!</Text>
      <Button type='primary' onClick={() => {
        setFocus(true)
      }}
      >点击获得焦点</Button>
      <Input focus={focus} onFocus={onFocus} onBlur={() => {
        setFocus(false)
      }} style={{marginTop: '10px', border: '1px solid #eee', padding: '10px'}} placeholder='获得焦点'
      />
    </View>
  )
}

期望结果

表现正常

实际结果

console.js:288 Warning: flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering. Consider moving this call to a scheduler task or micro task.
at taro-input-core
at ReactComponent (

环境信息

Taro CLI 4.0.4 environment info:
    System:
      OS: macOS 14.5
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 22.1.0 - /usr/local/bin/node
      Yarn: 1.21.1 - /usr/local/bin/yarn
      npm: 10.7.0 - /usr/local/bin/npm
    npmPackages:
      @tarojs/cli: 4.0.4 => 4.0.4
      @tarojs/components: 4.0.4 => 4.0.4
      @tarojs/helper: 4.0.4 => 4.0.4
      @tarojs/plugin-framework-react: 4.0.4 => 4.0.4
      @tarojs/plugin-platform-alipay: 4.0.4 => 4.0.4
      @tarojs/plugin-platform-h5: 4.0.4 => 4.0.4
      @tarojs/plugin-platform-harmony-hybrid: 4.0.4 => 4.0.4
      @tarojs/plugin-platform-jd: 4.0.4 => 4.0.4
      @tarojs/plugin-platform-qq: 4.0.4 => 4.0.4
      @tarojs/plugin-platform-swan: 4.0.4 => 4.0.4
      @tarojs/plugin-platform-tt: 4.0.4 => 4.0.4
      @tarojs/plugin-platform-weapp: 4.0.4 => 4.0.4
      @tarojs/react: 4.0.4 => 4.0.4
      @tarojs/runtime: 4.0.4 => 4.0.4
      @tarojs/shared: 4.0.4 => 4.0.4
      @tarojs/taro: 4.0.4 => 4.0.4
      @tarojs/vite-runner: 4.0.4 => 4.0.4
      babel-preset-taro: 4.0.4 => 4.0.4
      eslint-config-taro: 4.0.4 => 4.0.4
      react: ^18.0.0 => 18.0.0
    npmGlobalPackages:
      typescript: 3.8.3