getElementById 反应本机

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

你没有get getElementById react native，你必须使用state。你可以这样做：

  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 箭头函数中，你不需要在 constructor:

中添加这个绑定

是的，我说的是上面例子中的绑定

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);
  }

您还可以使用 apply/call 内联组件事件处理程序创建简单绑定，并通过在 [=] 中使用箭头函数来避免更改 this 上下文33=]渲染。一个例子是

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

这是上面的例子。

getElementById 反应本机

getElementById react-native

javascript

getelementbyid

react-native