javascript - 如何从组件外访问 react native 组件？

Question

我正在尝试从组件外的函数访问 React-native 组件的文本输入。我想通过 clearForm() 函数中的引用清除 TextInput。

MyComponent.js

import React, { Component } from 'react';
import { 
  View,
  TextInput,
} from 'react-native';

class myComponent extends Component {
  render() {
    return (
      <View style={styles.container}>
        <TextInput
          ref= {'email'}
          style={styles.input}
          placeholder="Email"
        />
      </View>
    );
  }
}

Actions.js

function clearForm(data){
  for(var input_name in data){
    /////???
    //this.refs[input_name].setNativeProps({text: ''});
  }
}

Answer 1

很抱歉花了这么长时间，但这应该有效:

// myComponent.js
class myComponent extends Component {

  constructor(props) {
    this.state = { 
      emailText: ''
    }
  }

   clearField() { 
    this.setState({ 
      emailText: ''
    })
   }

  render() {
    return (
      <View style={styles.container}>
        <TextInput
          ref= {'email'}
          style={styles.input}
          placeholder="Email"
          value={this.state.emailText}
        />
      </View>
    );
  }
}

// Actions.js
function clearForm(data){
  for(var input_name in data){
    this.refs[input_name].clearField();
  }
}