我有一个TextInput的简单代码,我希望它在第一次渲染和提交时得到关注.然而,它根本没有得到关注.

render() {
    return (
      <TextInput
        ref={(c) => this._input = c}
        style={[styles.item, this.props.style]}
        placeholder={"New Skill"}
        onChangeText={(text) => {
          this.setState({text})
        }}
        onSubmitEditing={(event) => {
          this.props.onSubmitEditing(this.state.text);
          this._input.clear();
          this._input.focus();
        }}
      />
    );
  }

  componentDidMount() {
    this._input.focus();
  }

推荐答案

所以我的假设是正确的.try 聚焦失败,调用componentDidMountthis._input不包含任何内容,因为render函数还没有调用,也没有引用它.

所以现在的解决方案是,在调用渲染函数之前,先执行delay次.

这就是为什么将代码封装在setTimeout函数中非常有用的原因.无论如何,我承认,这有点棘手.如果有人能找到更好的方法那就太好了.

componentDidMount() {
   setTimeout(() => this._input.focus(), 250);
}

React-native相关问答推荐

使用 Auth Token 标头react 本机图像,如何处理 401?

应用管理

从 React 原生 Js 代码调用 Android Native UI 组件方法

找不到变量 atob

如何在react-navigation 中将props传递给screens/components

如何为 Picker 提供默认的Please select...选项?

使用直接在 Windows 中运行的模拟器在 WSL 中运行 React Native

可以在没有 await 关键字的情况下调用异步函数吗?

在 React Native 中无法滚动到 ScrollView 的底部

如何使用 Typescript 在无状态组件上设置 navigationOptions

从数据源添加/删除列表视图项时为它们设置动画

我可以将标题传递给图像源吗?

在 React Native 视图上强制 onLayout

如何在 React Native 中使用 Jest

如何知道 FlatList 中的滚动状态?

Port 8081 already in use, packager is either not running or not running correctly Command /bin/sh failed with exit code 2

如何在 react native 中将数组保存在异步存储中?

Android Log

react-native图像预取

在 React Native 中将props传递给外部样式表?