[微信小程序]Input 组件 onChange 与 onInput 表现不一致

[ModyQyW]

问题描述

微信小程序中，Input 组件onChange与onInput表现不一致。

复现步骤

1. 终端执行taro init taro-test，项目介绍任意，不使用 TS，预处理器 Sass，默认模板
2. 用以下代码覆盖src/pages/index/index.jsx

import Taro, { Component } from '@tarojs/taro'
import { View, Text, Input } from '@tarojs/components'
import './index.scss'

export default class Index extends Component {
  constructor () {
    super()
    this.state = {
      text: ''
    }
  }

  onChangeText = (e) => {
    this.setState({ text: e.target.value })
  }

  render () {
    return (
      <View className='index'>
        <Input
          className='input'
          value={this.state.text}
          onChange={this.onChangeText}
          // onInput={this.onChangeText}
          placeholder='输入文字'
        />
        <Text className='text'>{this.state.text}</Text>
      </View>
    )
  }
}

3. 用以下代码覆盖src/pages/index/index.scss

.input {
  width: 100%;
  height: 80rpx;
  margin-bottom: 16rpx;
  border-bottom: 2rpx solid black;
}

4. 终端在项目根目录下执行npm run dev:weapp，微信开发者工具打开项目，在输入框内输入内容，输入框失去聚焦时才会出现输入的内容（onChange事件的表现）
5. 注释src/pages/index/index.jsx23行，取消注释src/pages/index/index.jsx24行，保存，在输入框内输入内容，输入内容后马上出现输入的内容（onInput事件的表现）

实际业务（taro + mobx）：真机上弹出键盘输入完毕后，没有收起键盘就直接点击按钮触发按钮点击事件，在点击事件中获取 text 然后发送请求。使用onChange事件会获取到修改前的 text 导致了一定的问题。该部分的复现步骤已提供，请往下看。

期望行为

官方文档把两个事件放在了一起，我认为这意味着onChange表现应当与onInput一致，输入内容后输入的内容马上更新，而无需等到输入框失去聚焦。

没有尝试其他端的表现。

报错信息

无报错，但表现不符合预期。

系统信息

 Taro CLI 1.3.19 environment info:
    System:
      OS: macOS 10.14.6
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 10.16.3 - ~/.nvm/versions/node/v10.16.3/bin/node
      Yarn: 1.17.3 - ~/.nvm/versions/node/v10.16.3/bin/yarn
      npm: 6.11.3 - ~/.nvm/versions/node/v10.16.3/bin/npm
    npmPackages:
      @tarojs/components: 1.3.19 => 1.3.19 
      @tarojs/plugin-babel: 1.3.19 => 1.3.19 
      @tarojs/plugin-csso: 1.3.19 => 1.3.19 
      @tarojs/plugin-sass: 1.3.19 => 1.3.19 
      @tarojs/plugin-uglifyjs: 1.3.19 => 1.3.19 
      @tarojs/router: 1.3.19 => 1.3.19 
      @tarojs/taro: 1.3.19 => 1.3.19 
      @tarojs/taro-alipay: 1.3.19 => 1.3.19 
      @tarojs/taro-h5: 1.3.19 => 1.3.19 
      @tarojs/taro-qq: 1.3.19 => 1.3.19 
      @tarojs/taro-quickapp: 1.3.19 => 1.3.19 
      @tarojs/taro-swan: 1.3.19 => 1.3.19 
      @tarojs/taro-tt: 1.3.19 => 1.3.19 
      @tarojs/taro-weapp: 1.3.19 => 1.3.19 
      @tarojs/webpack-runner: 1.3.19 => 1.3.19 
      eslint-config-taro: 1.3.19 => 1.3.19 
      eslint-plugin-taro: 1.3.19 => 1.3.19 
      nerv-devtools: ^1.4.0 => 1.4.4 
      nervjs: ^1.4.0 => 1.4.4 
      stylelint-config-taro-rn: 1.3.19 => 1.3.19 
      stylelint-taro-rn: 1.3.19 => 1.3.19

[taro-bot]

欢迎提交 Issue~

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

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

Good luck and happy coding~

[ModyQyW]

附上面提到的实际业务demo，需要真机调试。使用手机华为荣耀9X，运行系统28，微信版本7.0.6，基础库版本2.8.3 [292]。下面是复现步骤。

1. 终端执行taro init taro-test，不使用 TS，预处理器 Sass，模板 mobx
2. 用以下代码覆盖src/pages/index/index.jsx

import Taro, { Component } from '@tarojs/taro'
import { View, Button, Text } from '@tarojs/components'
import { observer, inject } from '@tarojs/mobx'
import { observable, action } from 'mobx'

import './index.scss'

@inject('counterStore')
@observer
class Index extends Component {

  @observable text = ''

  @action
  onChangeInput = (e) => {
    this.text = e.target.value
  }

  onConfirm = () => {
    if (!this.text) {
      Taro.showModal({
        title: '提示',
        content: '获取到的文本是空文本' + this.text,
        showCancel: false
      })
    } else {
      Taro.showModal({
        title: '提示',
        content: '获取到的文本是 ' + this.text,
        showCancel: false
      })
    }
  }

  render () {
    const { text } = this
    return (
      <View className='index'>
        <Input
          className="input"
          placeholder='请输入文字'
          onChange={this.onChangeInput}
          // onInput={this.onChangeInput}
        />
        <Text className="text">文本：{ text }</Text>
        <Button onClick={this.onConfirm}>
          <Text>确定</Text>
        </Button>
      </View>
    )
  }
}

export default Index 

3. 用以下代码覆盖src/pages/index/index.scss

page {
  width: 100%;
  height: 100%;
  font-size: 28rpx;
  line-height: 44rpx;
}

.index {
  width: 100%;
  height: 100%;

  .input {
    width: 100%;
    height: 80rpx;
    margin-bottom: 16rpx;
  }

  .text {
    margin-bottom: 16rpx;
  }
}

4. 打开真机调试，输入文本后不要收起键盘直接点击按钮，会弹框提示文本。在真机调试中，即使已经输入了文字，但仍被提示是空文本，使用onInput没有该问题。

[jinjinjin0731]

用 onInput 。小程序中没有 onChange 事件。 这个 onChange 仅针对 h5 端作为一个补充使用。建议 H5 端和 小程序端都使用 onIput

[ModyQyW]

建议在官网对应文档上直接去掉onChange或添加相对应说明，以免出现类似误解。

[taro-bot]

Hello~

您的问题楼上已经有了确切的回答，如果没有更多的问题这个 issue 将在 15 天后被自动关闭。

如果您在这 15 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~

[Yaphet2015]

发现h5下ios系统输入法 直接点击联想词输入时
无论是onChange还是onInput都获取不到值
v1.3.19

[Yuiffy]

我看文档里onChange、onInput写在一起，以为是别名，效果一样，看了这个issue才懂居然不一样。
我一直用onChange，结果导致input失去焦点才会刷新，导致submit按钮时onChange的setState还没生效，导致submit的不是最新数据。
这个确实该在文档表现出来