javascript - 如何修复React Native中的setState上的undefined is not a object

Question

我目前是 React Native 的新手，我想知道当我在 Native Base 的输入文本上输入时，错误显示 undefined 不是一个对象(评估 e.target.value) 为什么e.target.value错误？

我的目标:当 _onPressButton 按下时，我键入的状态将发出警报

我将向大家展示我创建的示例代码

    class WelcomeScreen extends Component {

  constructor(props) {
    super(props);

    this.state = {
      usernameInput:'',
      passwordInput:'',
    }

    this._onPressButton = this._onPressButton.bind(this);
    this._handleUsername = this._handleUsername.bind(this);
    this._handlePassword = this._handlePassword.bind(this);
  }


  _onPressButton() {
    alert(this.state.usernameInput);
  }

  _handleUsername = (e) => {
    this.setState({
      usernameInput:e.target.value
    })
  }

  _handlePassword = (e) =>  {
    this.setState({
      passwordInput:e.target.value
    })
  }

   render() {
     return (
      <Container>

        <View>
            <Image resizeMode="contain" style={{width: '100%', height: '40%',marginTop:'20%'}} 
              source={require('../Tracker/android/Assets/deliveryman.png')} />
        </View>

        <View style={{bottom:70,alignItems:'center',justifyContent:'center'}}>

          <Item rounded style={{width:'80%', borderRadius: 5, height:40}}>
            <Input placeholder="Username" 
            value={this.state.usernameInput} 
            onChangeText={this._handleUsername}
            style={{fontFamily: 'Gill Sans',}} />
          </Item>

          <Item rounded style={{width:'80%',marginTop:20,borderRadius: 5, height:40}}>
            <Input placeholder="Password" 
            value={this.state.passwordInput} 
            onChangeText={this._handlePassword} 
            secureTextEntry={true} 
            style={{color:'blue',fontFamily: 'Gill Sans'}}/>
          </Item>

          <LinearGradient 
            start={{x: 1, y: 0}} 
            end={{x: 0, y: 0}} 
            colors={['#2C73D2', '#008E9B']} 
            style={styles.linearGradient}>
            <TouchableOpacity onPress={this._onPressButton}>
            <Text style={styles.buttonText}>
              Login
            </Text>
            </TouchableOpacity>
          </LinearGradient>
        </View>

        <View style={{width:'100%',justifyContent:'center',alignItems:"center",marginTop:50}}>
          <Text style={{fontWeight:'300',fontFamily: 'Gill Sans',}}>© 2019 Hi-Flyer Food. </Text>
          <Text style={{fontWeight:'300',fontFamily: 'Gill Sans',}}>Designed by Solutions Experts and Enablers, Inc.</Text>
        </View>

      </Container>
     )
   }
}

Answer 1

React Native 与 Reactjs 不同，您需要获取 e.target.value。

在onChangeText中，函数中传递的值已经是文本值。

看看docs .

改变这个

  _handleUsername = (e) => {
    this.setState({
      usernameInput:e.target.value // e is the text from the input
    })
  }

  _handlePassword = (e) =>  {
    this.setState({
      passwordInput:e.target.value // e is the text from the input
    })
  }

至

  _handleUsername = usernameInput => {
    this.setState({ usernameInput }) // setState with the text from the input
  }

  _handlePassword = passwordInput =>  {
    this.setState({ passwordInput }) // setState with the text from the input
  }