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

我知道我可以使用

this.state

实现这一点，但我想使我的代码统一。我通过API连接了web应用程序和移动应用程序

这就是我的ReactJS Web应用程序的外观（这一个有效）：

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>
    );
  }
}

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”导入React
导出默认类签名扩展React.Component{
签名=（）=>{
var username=this.refs.username.value；
var password=this.refs.password.value；
console.log（用户名）；//有效
console.log（密码）；//有效
}
渲染（）{
返回(
提交
);
}
}

上面的代码不使用任何状态来获取文本框的值，我希望在React Native中实现同样的功能

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

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>
    );
  }
}

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”导入React；
从“react native”导入{Alert，TextInput，View，Button}；
导出默认类App扩展React.Component{
签名=（）=>{
var username=this.refs.username.value；
var password=this.refs.password.value；
Alert.Alert（用户名）；//不起作用
警报。警报（密码）；//不起作用
}
render（）{
返回(
);
}
}

---

我希望代码尽可能统一，但相同的逻辑在React Native中不起作用。不使用state是否可以执行此操作？

使用

this.refs.username.\u lastNativeText

获取

username

字段的内部文本值

---

然而，根据官方RN指南，这并不是最好的方法。有关更多详细信息，请参阅。

我不确定您在本机应用程序中使用的react版本，但您可以尝试回调refs，而不是字符串refs，

并像

这样使用它。username

@shubhamkhattri我得到

引用错误：找不到变量：ref

。您的答案

this.refs.username.input.\u lastNativeText

在

this.refs.username.\u lastNativeText

工作正常。哦，好的。在发布之前，我没有在IDE中验证它。我已更新了答案。注意：此方法在React Native 0.62上停止工作<代码>\u lastNativeText在此版本中未定义。我使用了此选项：