Реагировать / Реагировать-Родные ссылки

Question

Я пытаюсь дать своему пользовательскому компоненту возможность использовать ref, но я не уверен, как это сделать, что будет лучшим способом сделать это?

Например, у меня есть мой компонент: <InputField ref="email" />

Если я сделаю console.log внутри класса InputField я получаю пустой refs={}

    <View style={ styles.wrapItems }>
    <TouchableOpacity onPress={() => this.emailInput.onError() }>
     <Text>Show Error</Text></TouchableOpacity>
     <InputField ref={(ref) => this.emailInput } alignItems={'center'} placeholder="Your Email" />
     <InputField ref={(ref) => this.passwordInput } secureTextEntry={true} placeholder="Your Password" />
</View>

Внутри моего компонента

export default class InputField extends Component {
  constructor(props) {
    super(props);
  }
  static onError() {
    alert('On Error');
  }
return (
 <View style={ styles.inputWr }>
  <TextInput
   ref={??}
   style={ [styles.input, textDir, textColor] }
   onChangeText={this.onChangeText}
   keyboardType={keyboardType}
   underlineColorAndroid={'rgba(0,0,0,0)'}
   onFocus={this.onFloatLabel}
   secureTextEntry={secureTextEntry}
   value={this.state.text}
   onBlur={this.onFloatLabel} />

Answer 1

Вам нужно назначить параметр ref для this.emailInput

<InputField ref={ref => this.emailInput = ref} alignItems={'center'} placeholder="Your Email" />

Но будьте осторожны, используя ссылки, обычно это не очень хороший подход (иногда обратные вызовы реквизита делают свою работу).

Answer 2

Решение по ОП.

Я изменил статическую функцию на нестатическую, и это сработало.

От:

static onError() {

Для того, чтобы:

onError() {