Question

我有一个<TextInput>，我通过这样做了一个ref属性：

ref={node => this.usernameInput = node;}

然后，当用户按下试图获取<TouchableInput>值的this.usernameInput时，我有一个方法。我的this.usernameInput方法中onPress不为空，但我无法找到获取其价值的方法！当我这样做时：

console.log(this.usernameInput.value);

记录undefined。如果我设置断点，并检查this.usernameInput我可以看到它，但没有value属性或方法，并且我没有看到任何可以返回当前值的属性或方法。如何获得<TextInput>的价值？

修改

这是我的组件类：

import {
  View,
  Text,
  TextInput,
  TouchableHighlight
} from 'react-native';
import {Manager as ModalManager} from 'react-native-root-modal';

class AppContainer extends React.Component {
  loginModal;

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

  async componentWillMount() {
    this._createLoginModal();
  }

  render() {
      return (
        <View >
          <Text>Hello.</Text>
        </View>
      );
    } 
  }

  _onLoginPress() {
    //this returns 'undefined', although this.usernameInput is not undefined
    console.log(`USERNAMEinputValue: ${this.usernameInput.props.value}`);
  }

  _createLoginModal() {
    this.loginModal = new ModalManager(
        <View >
          <View >

            <Text>Username:</Text>
            <TextInput
              placeholder="Username"
                      ref={node => {
                        this.usernameInput = node;
              }}
            ></TextInput>

            <TouchableHighlight
              onPress={this._onLoginPress}
            >
              <Text>Login</Text>

            </TouchableHighlight>

          </View>
        </View>
    );
  }

}

Answer 1

我找到了一个参数_lastNativeText，它在完成react本机源代码后保存TextInput组件中的文本。您可以使用该参数获取下面的值作为示例。

this.usernameInput._lastNativeText

但我仍然不建议使用这种方法。最好使用@jayce444和@nifi

建议的基于状态的方法

Answer 2

如何将用户名存储在州？

a 0 0 0 0 1  
a 0 0 0 1 1  
a 1 0 0 1 1  
b 1 0 0 1 1  
c 0 0 1 1 1  
c 1 0 0 0 0   
c 0 1 0 0 0

然后在_onLoginPress：

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

Answer 3

在React（和RN）中使用ref通常是反模式。请参阅Don't Overuse Refs和Lifting State Up。在某些情况下，这是必要的，但这不是其中之一。自从使用Redux以来，至少有三个可行的选项。

不是优惠顺序：

在组件中使用本地状态：

constructor(props) {
  super(props);

  this.state = {
    username: ''
  };
}

render() {
  return (
    <TextInput
      placeholder="Username"
      value={this.state.username}
      onChangeText={(username) => this.setState({username})}
    />
  );
}

将值存储在全局状态并使用例如react-redux中间件connect函数将状态的该部分映射到组件的道具。有关如何实现此操作的说明，请参阅using react-redux with Redux。
将值存储在父组件中。这个想法与第一个代码示例相同，只是您将值和onChange回调函数作为子组件的道具提供。

在所有这些情况下，您可以使用

console.log(this.state.username); // (1) & (3)

或

console.log(this.props.username); // (2)

编辑：推理

选择哪个选项取决于具体情况，有时纯粹是偏好问题。请参阅Redux作者的this comment。 tl; dr做最合乎逻辑/合理的事情。这通常意味着提升＆＃34;国家，或使用全球国家。根据经验，可以推断，只要手头的组件只需要数据，就将其存储在本地状态。

反驳意见是stateless functional components是首选。看到推理，例如here。反应文档过去常常提到功能组件可能带来的未来性能优势，但此后已被删除。每当您不一定需要组件生命周期方法或本地状态时，请使用无状态功能组件并将状态存储在组件链中更高的位置。

如何在onPress处理程序中获取<textinput>的值？

3 个答案: