关注下一个文本输入或提交在自定义文本输入中不起作用

Question

首先这里是我的自定义组件。

 return (
      <View style={[styles.container, this.props.style]}>

        <TextField
          style={styles.inputText}
          autoCapitalize={this.props.autoCapitalize}
          ref={this.props.ref}
          autoCorrect={false}
          onFocus={() => this.setState({isFocus:true})}
          onBlur={() => this.setState({isFocus:false})}
          value={this.state.text}
          label={this.props.placeholder}
          secureTextEntry={this.props.secureTextEntry}
          blurOnSubmit={this.props.blurOnSubmit}
          keyboardType={this.props.keyboardType}
          returnKeyType={this.props.returnKeyType}
          textContentType={this.props.textContentType}
        //  onSubmitEditing={this.props.focus(this.props.textInput)}
          onSubmitEditing={this.props.onSubmit}
          placeholderTextColor='grey'
          onChangeText={this.props.onChangeText ? this.props.onChangeText : (text) => this.setState({ text })}
          editable={this.props.editable}
        />
      </View>
    );

现在在提交电子邮件字段时，我想将焦点放在密码字段上，在提交密码时我想提交表单。

下面是代码：

<MaterialTextInput
             placeholder="Email"
           //  ref={(input) => { this.emailInput = input; }}
             ref={ref => (this.emailInput = ref)}
             onSubmit = {() => this.passwordInput.focus()}
             onChangeText={(text) => this.handleEmailchange(text)}/>


          <MaterialTextInput
             placeholder="Password"
             ref={ref => this.passwordInput = ref}
             onSubmit = {() => this.submit()}
             onChangeText={(text) => this.handlePasswordchange(text)}/>

但这不起作用。 它给出了错误，

this.passwordInput.focus is undefined

请告诉我我在这里做错了什么？

Answer 1

您不能在自定义组件中直接使用ref。您必须如下声明您的自定义组件：

const MaterialTextInput = React.forwardRef((props, ref) => {
  return (
    <View style={[styles.container, this.props.style]}>
      <TextField
        style={styles.inputText}
        autoCapitalize={this.props.autoCapitalize}
        ref={ref} // Change Here also
        autoCorrect={false}
        onFocus={() => this.setState({isFocus:true})}
        onBlur={() => this.setState({isFocus:false})}
        value={this.state.text}
        label={this.props.placeholder}
        secureTextEntry={this.props.secureTextEntry}
        blurOnSubmit={this.props.blurOnSubmit}
        keyboardType={this.props.keyboardType}
        returnKeyType={this.props.returnKeyType}
        textContentType={this.props.textContentType}
      //  onSubmitEditing={this.props.focus(this.props.textInput)}
        onSubmitEditing={this.props.onSubmit}
        placeholderTextColor='grey'
        onChangeText={this.props.onChangeText ? this.props.onChangeText : (text) => this.setState({ text })}
        editable={this.props.editable}
      />
    </View>
  )
})

现在，您可以在组件中使用 ref。

Answer 2

您不能在自定义组件中直接使用ref。使用React.forwardRef()。也不要使用this.props.，而是使用props.，因为你的组件不是基于类的。

因为this.passwordInput 中的组件<MaterialTextInput> 实际上是<View> 而不是<TextField>。而 View 没有任何名为 focus() 的方法！！！

不再是上述情况了。

1) 从文件中导出您的 组件，例如MaterialTextInput.js

export default MaterialTextInput = React.forwardRef((props, ref) => (
  <View style={[styles.container, props.style]}>
    <TextField ref={ref}
    onSubmitEditing={props.onSubmit}
    ...
    />
  </View>
));

2) 然后导入你的组件：

import MaterialTextInput from 'MaterialTextInput';

3) 像以前一样使用你的组件

...
<MaterialTextInput ref={ref => this.emailInput = ref}
onSubmit={() => this.passwordInput.focus()}
... />

<MaterialTextInput ref={ref => this.passwordInput = ref}
onSubmit={() => this.submit()}
... />