AtInput 使用hooks value问题(^3.0.0-alpha+.0.0-rc.2)

[kala888]

问题版本

"@tarojs/taro": "3.0.0-rc.2",
"taro-ui": "^3.0.0-alpha"

问题代码，结果一输入值，瞬间就被清空

import React, { useState } from 'react'
import { AtInput } from 'taro-ui'

export default function HomePage() {
  const [value, setValue] = useState(null)
  const handleChange = (v) => {
    console.log('changed...', v)
    setValue(v)
  }
  console.log('render...', value)
  return (
    <AtInput
      placeholder='请输入用户名'
      name='login'
      onChange={handleChange}
    />
  )
}

同样代码

"@tarojs/taro": "3.0.0-beta.6",
"taro-ui": "^3.0.0-alpha"

正常运行

[taro-ui-bot[bot]]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[liuhuapiaoyuan]

<AtInput placeholder='请输入用户名' name='login' onChange={handleChange} value={value} /> 你没有把数据绑定上去，目测楼主react不是很熟悉

[kala888]

之前不用绑是可以用的，而且还上了生产，所以不知道为啥不行了

[evanyangg]

@liuhuapiaoyuan 有遇到输入值时，自动 blur 的情况吗？ const [captcha, setCaptcha] = useState('') const handleCaptchaClick = (value, event) => { console.log(value, event); setCaptcha(value) return value } ` <AtInput clear title='' name='captcha' type='text' maxlength={6} placeholder='验证码' value={captcha} onChange={handleCaptchaClick}

`

[heruns]

@liuhuapiaoyuan 有遇到输入值时，自动 blur 的情况吗？ const [captcha, setCaptcha] = useState('') const handleCaptchaClick = (value, event) => { console.log(value, event); setCaptcha(value) return value } <AtInput clear title='' name='captcha' type='text' maxlength={6} placeholder='验证码' value={captcha} onChange={handleCaptchaClick} > </AtInput>

我今天遇到了，原因是将 AtInput 写在了循环内，将其移出循环就正常了。比如组件 A 中使用了 AtInput，组件 B 中在循环中使用了组件 A: arr.map(item => <View><A/></View>)，传了 key 也不行，将 A 移到循环外就没这个问题了：<>{arr.map(item => <View>其他代码</View>)}<A/><>。但是如果在 A 中使用 @tarojs/components 的 Input 组件又没这个情况，很奇怪，估计是 taro 渲染机制导致的问题，还没深究。

Taro: v3.6.17, taro-ui: v3.1.1