reactjs - 无状态函数组件不能有引用

Question

我正在构建类似于 Facebook 或 Instagram 的搜索页面。基本上，如果我们按下搜索按钮，它会导航到“SearchScreen”。当其组件安装后，我想将搜索标题设置为焦点(光标)。

我的问题是当我将 TextInput ref 设置为 prop 时。我收到 无状态函数组件不能有 refs 错误。这是正确的做法吗？为什么它不起作用？除了这个之外你还知道更好的方法吗？

我将 _renderHeader 私有(private)函数添加到 FlatList 中的 renderHeader 属性中。这是_renderHeader

  _renderHeader = () => {
    return (
      <View style={styles.layoutheader}>
        <View style={styles.containerheader}>
          <RkTextInput
            rkType='row'
            ref="sbar"  /////////////////////HERE////////////
            autoCapitalize='none'
            autoCorrect={false}
            label={<RkText rkType='awesome' style={{color:'white'}}>{FontAwesome.search}</RkText>}
            placeholder='Search'
            underlineWidth="1"
            underlineColor="white"
            style={styles.searchBarheader}
            inputStyle={{color:'white'}}
            labelStyle={{marginRight:0}}
            value={this.state.inputText}
            onChangeText={(inputText)=>{this.setState({inputText})}}
          />
          <View style={styles.left}>
            <RkButton
              rkType='clear'
              style={styles.menuheader}
              onPress={() => {
                this.props.navigation.goBack()
              }}>
              <RkText style={styles.titleText} rkType='awesome hero'>{FontAwesome.chevronLeft}</RkText>
            </RkButton>
          </View>
        </View>
      </View>
    )
  }

componentDidMount() {
    this.refs.sbar.focus(); ////////// Here I want to focus RkTextInput when it's loaded
}

更新这里是请求的实际代码

class SearchScreen extends Component {
  static navigationOptions = ({navigation}) => ({
    header: null
  })

  state = {
    active: false,
    inputText: ''
  }
   ...
  _renderRow = (row) => {
    ...
    );
  }

  _renderHeader = () => {
    ...
  }

  render() {
    return (
      <FlatList
        data={null}
        renderItem={this._renderRow}
        renderHeader={this._renderHeader}
        keyExtractor={this._keyExtractor}
        ListHeaderComponent={this._renderHeader}
      />
    );
  }

  componentDidMount() {
    this.refs.sbar.focus();
  }
}

Answer 1

在我看来，您没有以正确的方式使用引用文献。您使用它们的方式已被弃用。您应该遵循以下语法:

<input
   type="text"
   ref={(input) => { this.textInput = input; }}
 />

当你想访问它时，你可以执行this.textInput。在您的情况下，this.textInput.focus()。