javascript - TypeError: undefined is not an object (evaluating 'event.target.value') - Stack Overflow

admin管理员组

文章数量:1323150

I'm working on a React Native project and I'm trying to make a Login form.

But I have some trouble to handle the text change in the TextInput.

My login form code

export default class Login extends Component {
  constructor(props) {
    super(props);

    this.state = {
      email: '',
      password: '',
    };
    this.handleChange = this.handleChange.bind(this);
  }

  onLogin() {
    const { email, password } = this.state;
    Alert.alert('Credentials', `${email} + ${password}`);
  }

  handleChange(event) {
    this.setState({
      email: event.target.value,
      password: event.target.value,
    });
  }

  render() {
    const { email, password } = this.state;
    return (
      <View style={styles.container}>
        <View style={styles.form}>
          <Title>Connectez-vous</Title>
          <TextInput
            style={{ backgroundColor: '#f8f8ff' }}
            value={email}
            onChangeText={this.handleChange}
            label="Adresse email"
            mode="outlined"
          />
          <TextInput
            style={{
              backgroundColor: '#f8f8ff',
            }}
            value={password}
            onChangeText={this.handleChange}
            label="Mot de passe"
            mode="outlined"
            secureTextEntry
          />
          <Button
            mode="outlined"
            onPress={() => this.onLogin}
            style={{ marginTop: '5%', marginHorizontal: '25%' }}
          >
            Connexion
          </Button>
        </View>
      </View>
    );
  }
}

When I try to write something in the TextInput I got the error : TypeError: undefined is not an object (evaluating 'event.target.value').

I'm working on a React Native project and I'm trying to make a Login form.

But I have some trouble to handle the text change in the TextInput.

My login form code

export default class Login extends Component {
  constructor(props) {
    super(props);

    this.state = {
      email: '',
      password: '',
    };
    this.handleChange = this.handleChange.bind(this);
  }

  onLogin() {
    const { email, password } = this.state;
    Alert.alert('Credentials', `${email} + ${password}`);
  }

  handleChange(event) {
    this.setState({
      email: event.target.value,
      password: event.target.value,
    });
  }

  render() {
    const { email, password } = this.state;
    return (
      <View style={styles.container}>
        <View style={styles.form}>
          <Title>Connectez-vous</Title>
          <TextInput
            style={{ backgroundColor: '#f8f8ff' }}
            value={email}
            onChangeText={this.handleChange}
            label="Adresse email"
            mode="outlined"
          />
          <TextInput
            style={{
              backgroundColor: '#f8f8ff',
            }}
            value={password}
            onChangeText={this.handleChange}
            label="Mot de passe"
            mode="outlined"
            secureTextEntry
          />
          <Button
            mode="outlined"
            onPress={() => this.onLogin}
            style={{ marginTop: '5%', marginHorizontal: '25%' }}
          >
            Connexion
          </Button>
        </View>
      </View>
    );
  }
}

When I try to write something in the TextInput I got the error : TypeError: undefined is not an object (evaluating 'event.target.value').

• javascript
• react-native

Share Follow edited Feb 15, 2020 at 14:54 Samuel Hulla 7,11988 gold badges4242 silver badges7979 bronze badges asked Feb 15, 2020 at 13:21 akromxakromx 9911 gold badge44 silver badges1010 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 1

Just try with below code::

handleChange(inputText) {
    this.setState({
      email: inputText,
    });
}

handleEmailChange(inputText) {
    this.setState({
      email: inputText,
    });
}

handlePasswordChange(inputText) {
    this.setState({
      password: inputText,
    });
}

<TextInput
        style={{ backgroundColor: '#f8f8ff' }}
        value={email}
        onChangeText={this.handleChange}
        label="Adresse email"
        mode="outlined"
/>

or you can use like this also

<TextInput
        style={{ backgroundColor: '#f8f8ff' }}
        value={email}
        onChangeText={(email) => { this.setState({ email }) }}
        label="Adresse email"
        mode="outlined"
/>

<TextInput
        style={{ backgroundColor: '#f8f8ff' }}
        value={email}
        onChangeText={(password) => { this.setState({ password}) }}
        label="Password"
        mode="outlined"
/>

I think this will work.. I have updated the onChangeText props

You're using React Native and not React DOM. <TextInput />'s onChangeText does not pass an event as the first argument, just a plain string. In general, event handling code you see from regular React examples that utilize the DOM don't transfer well here because those events don't actually exist in their native counterparts.

You need to change your current event handling code from this

  handleChange(event) {
    this.setState({
      email: event.target.value,
      password: event.target.value,
    });
  }

to this:

  handleChange(text) {
    this.setState({
      email: text,
      password: text,
    });
  }

However, this will also fail because as @Rawrplus mentioned, you have not bound the method to the context. this in JavaScript is special and doesn't work like it does in other languages and refers to the execution context of a method rather than the definition context. This can be fixed by using arrow functions:

  handleChange = (text) => {
    this.setState({
      email: text,
      password: text,
    });
  }

That's not working as expected because react-native has 2 different onChange functions:

<TextInput 
    onChange={e => console.log(e.nativeEvent.text)}
    onChangeText={text => console.log(text)} />

The first one (onChange), is not structured like on the web:

event : {
    nativeEvent : {
        eventCount,
        target,
        text
    }
}

and the second one, which you appear to be using only gives you the text as a string so you don't have to dig through layers of event properties to get it. You will either have to change your handler function to expect text or bind to onChange rather than onChangeText on the TextInput.

You can use this method :

this.state = {
  email: '13119165220',
}
onChangeText={text => this.setState({ email: text })} 

Your onLogin fucntion will display nothing, because you have not bound the function to your class, so this just points to the _global object instead of class.

• So either, explicitly bind the method

  this.onLogin = this.onLogin.bind(this)
  

• or more preferably start using arrow function syntax

  onLogin = () => {
    const { email, password } = this.state
    Alert.alert('Credentials', `${email} + ${password}`);
  }
  

As to the text-handling, <TextInput> ponent already has pre-defined onTextChange property, which accepts the inptu directly, instead of event which is reserved for onChange. You've essentially meshed the two together, so of course it doesn't work.

handleEmailChange = (textVal) => this.setState({
  email: textVal
})

<TextInput
  // ... other props
  onTextChange={this.handleEmailChange}
/>

本文标签： javascriptTypeError undefined is not an object (evaluating 39eventtargetvalue39)Stack Overflow