我如何读取反应本文中已经填充的文本引入



我有下面的文本输入:通常,我能够在发生更改时读取TextInput,问题是密码的文本输入用默认密码填充。因此,用户可能不需要编辑(更改) - 因此不触发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>
    );
  }
}

现在,我的问题是如何读取未更改的textInputs?

更改textInput value prop to defaultValue。我认为这可能起作用。TextInput value Prop不允许修改现有值。

<TextInput
            placeholder='Password'
            onChangeText={val => this.onChangeText('password', val)}
            style={styles.input}
            defaultValue={this.state.password}
            secureTextEntry={true}
          /> 

有一种方法可以直接从组件中获得TextInput值。

如果输入从value接收文本,则可以使用_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>
    );
  }
}

如果TextInput使用defaultValue Prop使用_getText方法读取初始值。

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

但是,请注意,这些方法未正式记录,并且可以在未来版本的React Native中删除,因此请自行决定使用它们。

相关内容

  • 没有找到相关文章

最新更新