Question

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

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

我在FlatList中为renderHeader道具添加了_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

在我看来，你并没有以正确的方式使用裁判。您使用它们的方式已被弃用。您应该遵循以下语法：

var http = require('http');

http.createServer(handler).listen(8080);

function handler(req, res) {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Hello World!');
}

当您想要访问它时，您可以执行<input type="text" ref={(input) => { this.textInput = input; }} />。在您的情况下，this.textInput。

Answer 2

您使用的是 RkTextInput ，这是一个功能组件，它不能有参考号。这就是你无法专注的原因。

我看不到一种方法来聚焦输入而不是包装Component，得到root的ref并找到你的input元素以便聚焦它。一个粗略的例子：

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>
    }
}

Answer 3

您将组件声明为函数：

_renderHeader = () => {
return (
  <View ...

这会创建一个受限制的“功能组件”，因为它没有状态，也没有“this”对象可供引用。由于refs保存在Component的'this.refs'中，因此不能将refs与功能组件一起使用。

如果要使用ref，则需要使用类Component，并将其声明为：

class Header extends React.Component {
   render() {
     return ( <View ...

无状态功能组件不能提供参考

3 个答案: