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

Question

我正在构建类似于Facebook或Instagram的搜索页面。基本上，如果我们按下搜索按钮，它会导航到"搜索屏幕"。当它的组件被挂载时，我想设置搜索标题是焦点（光标）。

我的问题是当我将文本输入ref设置为道具时。我得到了Stateless function components cannot have refs错误。这是正确的方法吗？为什么它不起作用？除了这个，你知道还有什么更好的方法吗？

我在 FlatList 中添加_renderHeader私有函数来渲染 Header 道具。这是_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().

Answer 2

您正在使用 RkTextInput，它是一个功能组件，它不能有 ref。这就是为什么你不能集中注意力。

除了包装组件、获取根的 ref 并找到您的输入元素以聚焦它之外，我没有看到任何方法来聚焦输入。一个粗略的例子：

class RoughExample extends React.Component {
    componentDidMount() {
        //find the input from your root
        this.input = this.root.querySelector('input');
        //if it exists, focus
        this.input && this.input.focus();
    }
    render() {
        <div ref={ (node) => {this.root = node;} }>
            <RkTextInput />
        </div>
    }
}