如何從組件外訪問react-native組件？

Question

我正在嘗試從組件外的函數訪問React-native組件的文本輸入。 我想通過clearForm（）函數中的refs清除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();
  }
}

Answer 2

您需要將ref屬性設置為一個函數。 在此處查看文檔：

https://facebook.github.io/react-native/docs/direct-manipulation.html

ref={ input => this.myInput = input }

實際上，在該文檔中確實有一個示例： https : //snack.expo.io/? session_id = snack-session- HylUL01kbf

Answer 3

嘗試使用組件引用名稱作為道具，如下所示：

this.refs.email.setNativeProps({text: ''});