Question

你如何获得react-native中的元素？

我的用例是登录屏幕。按下提交按钮，现在我想获取用户名和密码TextInputs的值。

      export default class Login extends Component 
      {
        login()
        {
          //document.getElementById('username'); //run-time error
        }
        render() 
        {
          return (

            <View style={{flex: 1,flexDirection: 'column',justifyContent: 'space-between',margin:10}}>
              <View style={{backgroundColor: 'powderblue'}} />
              <MyTextField id='user' placeholder="User Name" />
              <MyTextField id='pass' placeholder="Password" />
              <MyButton onPress={this.login} title='Login'/>
            </View>

          );
        }
      }

Answer 1

你没有得到反应原生的getElementById，你必须使用状态。你可以这样做：

  export default class Login extends Component {

      constructor (props) {
          super(props);
          this.state={
              email:'',
              password:''
          }
          this.login = this.login.bind(this); // you need this to be able to access state from login
      }

      login() {
          console.log('your email is', this.state.email);
          console.log('your password is', this.state.password);
      }

      render() {
          return (
            <View style={{flex: 1,flexDirection: 'column',justifyContent: 'space-between',margin:10}}>
              <View style={{backgroundColor: 'powderblue'}} />
              <TextInput onChangeText={(email) => {
            this.setState({email})/>
                 <TextInput secureTextEntry={true} onChangeText={(password) => {
            this.setState({password})/>
              <MyButton onPress={this.login} title='Login'/>
            </View>
          );
        }
      }

Answer 2

在React组件中处理事件是使用绑定的最常见情况。但是现在在ES7箭头功能中，您无需在构造函数中添加此绑定：

是的，我在上面的示例中谈论绑定

this.login = this.login.bind(this);

在您的构造函数中：

constructor (props) {
      super(props);
      this.state={
          email:'',
          password:''
      }
      this.login = this.login.bind(this);
  }

假设您有5到10个处理程序，每次创建一个方法时都将它们绑定在一起。

使用箭头功能，您可以采用封闭范围的 this 绑定。绑定该方法所需要做的就是：

语法如下：

exampleMethod = () => {
  //this is bound to the class
}

在上面的示例中，登录方法为：

  login = () => {
      console.log('your email is', this.state.email);
      console.log('your password is', this.state.password);
  }

您还可以使用组件事件处理程序的内联应用/调用来创建简单的绑定，并避免使用 render 中的箭头功能更改 this 上下文。一个例子是

<MyButton onPress={() => this.login()} title='Login'/>

那是上面的例子。

getElementById本地反应

2 个答案: