Javascript 如何在React Native中读取已填充的TextInput？

我在下面有一个文本输入： 正常情况下，当有更改时，我可以读取TextInput，问题是TextInput for password使用默认密码填充。 因此，用户可能不需要编辑（更改）它-因此不会触发

onChangeText

方法

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

export default class App extends Component {
  constructor(props){
    super(props);
    this.state = { 
      username: '', 
      password: 12345 
    }
  }

  onChangeText = (key, val) => {
    this.setState({ [key]: val})
  }

  render() { 
    return (
      <View style={styles.container}>
          <Text>Login Form</Text>
          <TextInput
            placeholder='Username'
            onChangeText={val => this.onChangeText('username', val)}
            style={styles.input}
            value={this.state.username}
          />
          <TextInput
            placeholder='Password'
            onChangeText={val => this.onChangeText('password', val)}
            style={styles.input}
            value={this.state.password}
            secureTextEntry={true}
          />      
      </View>
    );
  }
}

import React，{Component}来自“React”
从“react native”导入{View，Text，TextInput}
导出默认类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.state={
用户名：“”，
密码：12345
}
}
onChangeText=（键，val）=>{
this.setState（{[key]：val}）
}
render（）{
返回(
登录表单
this.onChangeText（'username'，val）}
style={style.input}
值={this.state.username}
/>
this.onChangeText（'password'，val）}
style={style.input}
值={this.state.password}
secureTextEntry={true}
/>      
);
}
}

---

现在，我的问题是如何读取未被更改的文本输入？

将文本输入

值

属性更改为

默认值

。我想那可能行得通。TextInput

value

prop不允许修改现有值

this.onChangeText（'password'，val）}
style={style.input}
defaultValue={this.state.password}
secureTextEntry={true}
/>

有一种方法可以通过直接从组件获取TextInput值

如果输入从

value

prop接收文本，您可以使用

\u lastNativeText

方法，如下例所示

export default class App extends Component {

  state = {
    text: 'Hello!'
  }

  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  componentDidMount() {
    this.printTextInputValue();
  }

  printTextInputValue = () => {
    const input = this.inputRef.current;
    console.log(input._lastNativeText);
  }

  render() {
    return (
      <View style={styles.container}>
        <TextInput value={this.state.text} ref={this.inputRef} />
        <Button onPress={this.printTextInputValue} title="Get input value"  />
      </View>
    );
  }
}

---

但是请注意，这些方法没有正式文档记录，可能会在React Native的未来版本中删除，因此请自行决定使用它们。

您想从哪里获取textInput数据？在我的州，因此我可以使用它来执行APIcall@DaggieBlanqx只需在进行API调用的地方使用

this.state.password

。例如，类似这样的登录（this.state.username、this.state.password）。您应该显示API调用代码，以获得准确的答案。@Freddy虽然这样做有效，但是否有一种方法可以直接读取html

document.getElementById（'passwordInput'）。value

？@DaggieBlanqx我认为没有任何现成的方法可以做到这一点。您可以使用类似的方法来简化表单处理。

export default class App extends Component {

  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  componentDidMount() {
    this.printDefaultInputValue();
  }

  printDefaultInputValue = () => {
    const input = this.inputRef.current;
    console.log(input._getText());
  }

  printTextInputValue = () => {
    const input = this.inputRef.current;
    console.log(input._lastNativeText);
  }

  render() {
    return (
      <View style={styles.container}>
        <TextInput defaultValue="Hello Default!" ref={this.inputRef} />
        <Button onPress={this.printTextInputValue} title="Get input value"  />
      </View>
    );
  }
}