Question

我有一个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();
  }

Answer 1

所以我的假设是真的。尝试关注失败，this._input在调用componentDidMount时不包含任何内容，因为render函数尚未被调用且没有参考。

所以现在的解决方案是延迟它直到渲染函数已被调用。

这就是为什么将代码包装在setTimeout函数中非常有用。无论如何，我承认，它有点棘手。如果有人找到更好的方法会很棒。

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

Answer 2

您可以使用TextInput的autoFocus属性并将其设置为true。它会自动将textInput集中在componentDidMount上。我对它进行了测试，并将它集中在componentDidMount和onSubmitEditing上。

render() {
return (
  <TextInput
    ref={(c) => this._input = c}
    placeholder={"New Skill"}
    autoFocus={true}
    onChangeText={(text) => {
      this.setState({text})
    }}
    onSubmitEditing={() => {
      this.props.onSubmitEditing(this.state.text);
      this._input.clear();
      this._input.focus();
    }}
  />
);
}

React Native TextInput无法获得焦点

2 个答案: