Question

我在下面有一个TextInput：通常，当发生更改时，我能够读取TextInput，问题是使用默认密码填充了密码的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？

Answer 1

将TextInput value属性更改为defaultValue。我认为这可能有效。 TextInput value道具不允许修改现有值。

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

Answer 2

有一种方法可以通过refs直接从组件获取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属性，请使用_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版本中删除，因此请自行决定使用它们。

我如何在React-Native中读取已经填充的TextInput？

2 个答案: