reactjs - 无状态功能组件无法引用

我正在建立类似于Facebook或instagram的搜索页面。基本上，如果我们按搜索按钮，它将导航到“SearchScreen”。当安装了它的组件时，我要设置搜索头为焦点(光标)。

我的问题是当我将TextInput ref设置为prop时。而且我收到Stateless function components cannot have refs错误。这是正确的方法吗？为什么不起作用？除此以外，您知道其他更好的方法吗？

我在FlatList中将_renderHeader私有(private)函数添加到renderHeader Prop 中。
这是_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();
  }
}

最佳答案

在我看来，您使用的引用不是正确的方式。不建议您使用它们。您应该遵循以下语法:

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

当您要访问它时，可以执行this.textInput。就您而言，是this.textInput.focus()。

关于reactjs - 无状态功能组件无法引用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46789603/