我如何从组件中访问反应本性组件

Question

我正在尝试从组件中的函数中访问反应本性组件的文本输入。我想通过 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

尝试使用组件ref名称作为道具，这样：

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