Question

我知道我可以使用this.state来做到这一点，但是我想使我的代码统一。我同时通过API连接了Web应用程序和移动应用程序。

这是我的ReactJS Web App的外观，（此功能有效）：

import React from 'react'

export default class SignIn extends React.Component {
  signIn = () => {
    var username = this.refs.username.value;
    var password = this.refs.password.value;

    console.log(username); //works
    console.log(password); //works
  }
  render () {
    return (
      <div>
        <input ref='username' placeholder='Username' />
        <input ref='password' type='password' placeholder='Password' />
        <button onClick={this.signIn.bind(this)}>Submit</button>
      </div>
    );
  }
}

上面的代码没有使用任何状态来获取文本框的值，我想在React Native中实现相同的目的。

在我的移动应用中，我有以下代码（这不起作用）：

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

export default class App extends React.Component {
  signIn = () => {
    var username = this.refs.username.value;
    var password = this.refs.password.value;

    Alert.alert(username); //doesn't work
    Alert.alert(password); //doesn't work
  }
  render() {
    return (
      <View style={{marginTop: 60}}>
        <TextInput ref='username' placeholder='Username' autoCapitalize='none' />
        <TextInput ref='password' placeholder='Password' autoCapitalize='none' secureTextEntry={true} />
        <Button title='Submit' onPress={this.signIn.bind(this)} />
      </View>
    );
  }
}

我希望代码尽可能统一，但是相同的逻辑在React Native中不起作用。不用状态就可以做到吗？

Answer 1

使用this.refs.username._lastNativeText获取username字段的内部文本值。

但是，根据官方RN指南，这不是最好的方法。有关更多详细信息，请参见this SO answer。

如何在不使用状态的情况下获取React Native中TextInput的值

1 个答案: