时间戳

首页 > 解决方案 > 表单使用 web 但不是 iOS，event.target 返回“未定义”

react-native - 表单使用 web 但不是 iOS，event.target 返回“未定义”

问题描述

我写了一个登录表单，可以在浏览器中使用，但不适用于 iOS 的 Expo Client。

changeHandler方法中的event.target.id和event.target.value在iOS 上返回“未定义”，而在浏览器中返回正确的值。

谁能解释为什么？

class AdminPanel extends Component {

  constructor(props){
    super(props)

    this.state = {
      isLoggedIn: false,  
      username: null,
      password: null
    }

    this.changeHandler = this.changeHandler.bind(this)
    this.loginHandler = this.loginHandler.bind(this)
  }

  changeHandler(event){
    let name = event.target.id;
    let value = event.target.value;

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

  loginHandler(event){
    if(this.state.isLoggedIn){
      this.setState({isLoggedIn: false, username: null})
    }else{
      if(this.state.username == "adm" && this.state.password == "123"){
        this.setState({isLoggedIn: true, password: null})
      }else{
        alert("Login failed")
      }
    }
  }

  render(){
    if(this.state.isLoggedIn){
      return (
        <View>
        <Text>Hi {this.state.username}!</Text>
        <input type="submit" value="Logout" onClick={this.loginHandler} />
        <StatusBar style="auto" />
        </View>
      )
    }else{
      return (
        <View>
          <Text>Welcome to the admin panel.</Text>
          <Input id="username" onChange={this.changeHandler} placeholder="Username" />
          <Input id="password" onChange={this.changeHandler} placeholder="Password" />
          <Button title="Login" onPress={this.loginHandler} />
          <StatusBar style="auto" />
        </View>
      );
    }
  }
}

标签： react-native

解决方案

我通过使用onChangeText而不是onChange解决了这个问题，并将两个包含名称和文本的参数传递给我的新方法inputHandler。

inputHandler(id, text){
    this.setState({[id]: [text]})
}

...

<Input name="username" onChangeText={ (text) => { this.inputHandler('username', text) }} placeholder="Username" />
<Input name="password" onChangeText={ (text) => { this.inputHandler('password', text) }} placeholder="Password" secureTextEntry={true} />

我不确定为什么无法从 iOS 访问event.target.name 和 event.target.value，但有些事情告诉我，事件在本机中的工作方式与在 Web 中的工作方式不同。

推荐阅读