本机获取TextInput值

Question

我遇到了一个非常简单的问题.我有登录表单,用户名,密码和按钮.在我的按钮处理程序中,我尝试获取textinput值.但总是得到不确定的价值.我错过了什么吗？

render() {
        <ExScreen
          headerColor={this.state.headerColor}
          scrollEnabled={this.state.enableScroll}
          style={styles.container} >
          <View >
            <View  >
              <View style={[styles.inputContainer]} >
                <TextInput
                  ref= "username"
                  onChangeText={(text) => this.setState({text})}
                  value={this.state.username}
                />
              </View>
 <Button style={{color: 'white', marginTop: 30, borderWidth: 1, borderColor: 'white', marginLeft: 20*vw, marginRight: 20*vw, height: 40, padding: 10}} 
             onPress={this._handlePress.bind(this)}>
              Sign In
            </Button>   
...
 _handlePress(event) {
    var username=this.refs.username.value;

Answer 1

执行此操作的快速且不太优化的方法是在onChangeText回调中使用箭头函数,方法是在onChangeText回调中传递username参数.

<TextInput
    ref= {(el) => { this.username = el; }}
    onChangeText={(username) => this.setState({username})}
    value={this.state.username}
/>

然后在你的_handlePress方法

_handlePress(event) {
    let username=this.state.username;
}

但这有几个缺点!

1. 在此组件的每个渲染上,都会创建一个新的箭头函数.
2. 如果子组件是PureComponent,它将不必要地强制重新渲染,这会导致巨大的性能问题,尤其是在处理大型迭代的大型列表,表或组件时.更多关于React Docs的内容

最佳实践是使用类似的处理程序handleInputChange并在构造函数中绑定```this``.

...
constructor(props) {
  super(props);
  this.handleChange= this.handleChange.bind(this);
}

...
handleChange(event = {}) {
  const name = event.target && event.target.name;
  const value = event.target && event.target.value;

  this.setState([name]: value);
}
...

render() {
  ...
  <TextInput
    name="username"
    onChangeText={this.handleChange}
    value={this.state.username}
  />
  ...
}

...

或者,如果您使用自动绑定的es6类属性速记this.但是在测试和性能方面,这有缺点.在这里阅读更多

...
handleChange= (event = {}) => {
  const name = event.target && event.target.name;
  const value = event.target && event.target.value;

  this.setState([name]: value);
}
...

render() {
  ...
  <TextInput
    name="username"
    onChangeText={this.handleChange}
    value={this.state.username}
  />
  ...
}

...

Answer 2

在React Native 0.43 :(也许晚于0.43就可以了.)

_handlePress(event) {
    var username= this.refs.username._lastNativeText;

Answer 3

如果你像我一样,并且不想使用或污染状态的一次性组件,这就是我所做的:

export default class Registartion extends Component {
  _register = () => {
    const payload = {
      firstName: this.firstName,
      /* other values */
    }

    console.log(payload)
  }

  render() {
    return (
      <RegisterLayout>
        <Text style={styles.welcome}>
          Register
        </Text>

        <InputText
          placeholder="First Name"
          onChangeText={(text) => this.firstName = text} />
        // More components...
        <CustomButton
          backgroundColor="steelblue"
          handlePress={this._register}>
          Submit
        </CustomButton>
     </RegisterLayout>
    )
  }
}

Answer 4

您应该使用States来存储输入字段的值. https://facebook.github.io/react-native/docs/state.html

• 要更新状态值,请使用 setState

onChangeText = {(value)=> this.setState({username:value})}

• 并获得这样的输入值

this.state.username

示例代码

export default class Login extends Component {

    state = {
        username: 'demo',
        password: 'demo'
    };

    <Text style={Style.label}>User Name</Text>
    <TextInput
        style={Style.input}
        placeholder="UserName"
        onChangeText={(value) => this.setState({username: value})}
        value={this.state.username}
    />

    <Text style={Style.label}>Password</Text>
    <TextInput
        style={Style.input}
        placeholder="Password"
        onChangeText={(value) => this.setState({password: value})}
        value={this.state.password}
    />

    <Button
        title="LOGIN"
        onPress={() => 
            {
                if(this.state.username.localeCompare('demo')!=0){
                    ToastAndroid.show('Invalid UserName',ToastAndroid.SHORT);
                    return;
                }

                if(this.state.password.localeCompare('demo')!=0){
                    ToastAndroid.show('Invalid Password',ToastAndroid.SHORT);
                    return;
                }

                //Handle LOGIN

            }
        }
    />

Answer 5

export default class App extends Component {
  state = { username: '', password: '' }

  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}
          />
          <TextInput
            placeholder='Password'
            onChangeText={val => this.onChangeText('password', val)}
            style={styles.input}
            secureTextEntry={true}
          />      
      </View>
    );
  }
}

希望这能解决你的问题

Answer 6

这对我有用

    <Form>

    <TextInput
    style={{height: 40}}
    placeholder="userName"
    onChangeText={(text) => this.userName = text}
    />

    <TextInput
    style={{height: 40}}
    placeholder="Password"
    onChangeText={(text) => this.Password = text}
    />


    <Button 
    title="Sign in!" 
    onPress={this._signInAsync} 
    />

    </Form>

和

  _signInAsync = async () => {
        console.log(this.userName)
        console.log(this.Password) 
  };

Answer 7

请注意如何使用setState（）。正确的形式是

this.setState({
      Key: Value,
    });

因此，我将按以下方式进行操作：

onChangeText={(event) => this.setState({username:event.nativeEvent.text})}
...    
var username=this.state.username;

Answer 8

尝试控制台记录对象，您将在 nativeEvent.text 中找到您输入的文本

例子：

handelOnChange = (enteredText) => {
    console.log(enteredText.nativeEvent.text)
}
render()
return (
    <SafeAreaView>
        <TextInput
            onChange={this.handelOnChange}
        >
</SafeAreaView>

)

Answer 9

你试过了吗

var username=this.state.username;