zoukankan      html  css  js  c++  java
  • taro ui 小程序 textarea 组件不能连续输入

    问题

    textarea 不能连续输入字符

    taro ui官网代码textarea示例

    import Taro from '@tarojs/taro'
    import { AtTextarea }  from 'taro-ui'
    export default class Index extends Taro.Component {
      constructor () {
        super(...arguments)
        this.state = {
          value: ''
        }
      }
      handleChange (value) {
        this.setState({
          value
        })
      }
      render () {
        return (
          <AtTextarea
            value={this.state.value}
            onChange={this.handleChange.bind(this)}
            maxLength={200}
            placeholder='你的问题是...'
          />
        )
      }
    }

     若按照上述示例代码书写,则会出现每输入一个字符,就会出现输入框失去焦点现象。如图所示

    解决

    在textarea组件上添加 focus 属性即可

          <AtTextarea
            value={this.state.value}
            focus
            onChange={this.handleChange.bind(this)}
            maxLength={200}
            placeholder='你的问题是...'
          />

    分析原因 

    因为每次onChange之后都调用setState,导致组件重新渲染,恢复组件初始状态就是没有取得焦点的状态。

    @萍2樱释ღ( ´・ᴗ・` )

    打不死的小强
  • 相关阅读:
    request
    href="#"
    可展开收起的客服导航。
    JS添加父节点的方法。
    精简漂亮的导航浮动菜单显示特效演示
    竖排导航
    仿新浪微博
    鼠标滑过改变文字
    滚动函数
    一些常用的兼容函数。
  • 原文地址:https://www.cnblogs.com/mggahui/p/14416209.html
Copyright © 2011-2022 走看看