反应本机获取 TextInput 值 [英] react native get TextInput value

问题描述

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

I am stuck with a very simple problem. I have login form with username, password and button. In my button handler, I try to get the textinput value. But always get undefined value. Am I missing something?

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;

推荐答案

快速但优化程度较低的方法是在 onChangeText 回调中使用箭头函数，将 username 作为参数传入您的 onChangeText 回调.

The quick and less optimized way to do this is by using arrow function inside your onChangeText callback, by passing username as your argument in your onChangeText callback.

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

然后在你的 _handlePress 方法中

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

---

但这有几个缺点！！！

---

But this has several drawbacks!!!

1. 在每次渲染此组件时，都会创建一个新的箭头函数.
2. 如果子组件是 PureComponent，它将不必要地强制重新渲染，这会导致巨大的性能问题，尤其是在处理大型列表、表格或在大量迭代上的组件时.React 文档中的更多信息

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

Best practice is to use a handler like handleInputChange and bind ```this`` in the constructor.

...
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}
  />
  ...
}

...

---

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

---

Or if you are using es6 class property shorthand which autobinds this. But this has drawbacks, when it comes to testing and performance. Read More Here

...
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}
  />
  ...
}

...

这篇关于反应本机获取 TextInput 值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！