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

RN端 swiper中包含input时,输入值后swiper会自动回到第一个tab页 #5586

Open
hujingyuki opened this issue Mar 1, 2020 · 6 comments
Assignees
Labels
T-rn Target - 编译到 React Native V-1 Version - 1.x

Comments

@hujingyuki
Copy link

再非第一个tab的页面往input中输入值时,触发onchange事件后页面会自动跳转至第一页且onchange事件无法获取到输入的值

复现步骤

class Index extends Component {
  constructor(props) {
    super(props)
    this.state = {
      currentTab: 0,
      name: ''
    }
  }

  swiperHandler = (e) => {
    console.log('swiperHandler', e)
    const { current = 0} = e.detail || {}
    this.setState({ currentTab: current })
  }

  changeInput = (e) => {
    console.log('changeInput', e)
    const { value } = e.detail || {}
    this.setState({ name: value })
  }

  render () {
    const { currentTab = 0, name } = this.state

    return (
      <View className='container'>
        <View className='box'>
          <Swiper current={currentTab} duration={300} onChange={this.swiperHandler} className='swiper'>
            <SwiperItem><Text>第一页:当前swiper索引值-{currentTab}</Text></SwiperItem>
            <SwiperItem>
              <Text>第二页:当前swiper索引值-{currentTab}</Text>
              <Input value={name} placeholder='请输入姓名' onChange={this.changeInput} />
            </SwiperItem>
          </Swiper>
        </View>
      </View>
    )
  }
}

export default Index

期望行为

1、页面不跳转
2、输入值能正常获取到

报错信息

无报错信息

系统信息

Taro 2.0.4

@taro-bot
Copy link

taro-bot bot commented Mar 1, 2020

CC @Pines-Cheng

@taro-bot
Copy link

taro-bot bot commented Mar 1, 2020

欢迎提交 Issue~

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

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

Good luck and happy coding~

@hujingyuki
Copy link
Author

changeInput方法触发了两次

@Pines-Cheng
Copy link
Contributor

Swiper 套 Input 。。。 这样交互不适合吧。。

@hujingyuki
Copy link
Author

Swiper 套 Input 。。。 这样交互不适合吧。。

为啥不合适呀?某一个swiper-item需要可以根据用户输入的信息精确查询信息呀,从来没听说过swiper里面不能有input呀,不就是一个容器而已吗

@Pines-Cheng
Copy link
Contributor

这么说也有道理,我来看看。

@Chen-jj Chen-jj added T-rn Target - 编译到 React Native and removed React Native labels Jul 6, 2020
@biorz biorz added the V-1 Version - 1.x label Aug 24, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
T-rn Target - 编译到 React Native V-1 Version - 1.x
Projects
None yet
Development

No branches or pull requests

4 participants