Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

react native中input实现有问题, #4613

Closed
LyunKi opened this issue Oct 16, 2019 · 6 comments
Closed

react native中input实现有问题, #4613

LyunKi opened this issue Oct 16, 2019 · 6 comments
Assignees

Comments

@LyunKi
Copy link

LyunKi commented Oct 16, 2019

问题描述
在封装Taro的input组件做成一个可以自由加减以及输入的组件时,发现在weapp上ok的封装在rn中出现异常。

复现步骤

  1. 引入Input组件;
  2. 输入值为100;
  3. 检验发现100大于10,重新setState为10,打印发现值已经改为10,并传递给Input组件
  4. weapp中生效,rn中,值是10,但是显示为100

期望行为
希望在外界传递新的值后,Input是完全受控的

报错信息
没有报错

系统信息

Taro v1.2 及以上版本已添加 taro info 命令,方便大家查看系统及依赖信息,运行该命令后将结果贴下面即可。

  • 操作系统 macos
  • Taro 版本 1.3.20
  • Node.js 版本 10.16
  • 报错平台 [rn]

补充信息
[可选]
看了下React native端Input的源码,发现value设置的事this.state.returnValue,而新传递的props.value会被传递给state的value,猜测,是因此导致值被传递而实际页面展示的值没有变化

@taro-bot
Copy link

taro-bot bot commented Oct 16, 2019

欢迎提交 Issue~

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

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

Good luck and happy coding~

@taro-bot
Copy link

taro-bot bot commented Oct 16, 2019

CC @Pines-Cheng

@Pines-Cheng
Copy link
Contributor

我在本地验证一下。

@Pines-Cheng
Copy link
Contributor

https://developers.weixin.qq.com/miniprogram/dev/component/input.html

value | string |   | 是 | 输入框的初始内容

微信小程序那边也不是完全受控的,其他端的交互特性都是以小程序为准的。

@taro-bot
Copy link

taro-bot bot commented Oct 17, 2019

Hello~

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

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

Good luck and happy coding~

@LyunKi
Copy link
Author

LyunKi commented Oct 17, 2019

https://developers.weixin.qq.com/miniprogram/dev/component/input.html

value | string |   | 是 | 输入框的初始内容

微信小程序那边也不是完全受控的,其他端的交互特性都是以小程序为准的。

但是我封装后的组件,在微信端是能够实现完全的受控,记得微信主要的问题是diff导致的,可以通过两次setState来让渲染的值和预期的值一致, 但是同样的组件放到rn端就做不到了。。。我可以把源码发上来,
使用方式

                                                                <Counter
                                                                    value={
                                                                        pickNums[
                                                                            item
                                                                                .pickingListItemGoods
                                                                                .goodsId
                                                                        ]
                                                                    }
                                                                    min={0}
                                                                    max={
                                                                        item.needPickQuantity
                                                                    }
                                                                    type='number'
                                                                    onChange={
                                                                        this
                                                                            .onPicking
                                                                    }
                                                                />

counter.zip

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants