开发者问题收集

TypeError：未定义不是一个对象（评估“event.target.value”）

2020-02-15
14717
javascript react-native

我正在开发一个 React Native 项目，并尝试制作一个登录表单。

但是我在处理 TextInput 中的文本更改时遇到了一些麻烦。

我的登录表单代码 

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

当我尝试在 TextInput 中写入某些内容时出现错误： TypeError：undefined 不是对象（评估“event.target.value”） 。

3个回答

只需尝试以下代码:: 

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"
/>

或者您也可以这样使用 

<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"
/>

我认为这会起作用..我已经更新了 onChangeText 道具

Mujibur Rehman Ansari
2020-02-15

您使用的是 React Native，而不是 React DOM。 <TextInput /> 的 onChangeText 不会传递事件 作为第一个参数，而只是一个纯字符串。通常，您从使用 DOM 的常规 React 示例中看到的事件处理代码无法很好地传输到这里，因为这些事件实际上并不存在于其原生对应物中。

您需要将当前的事件处理代码从此 

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

更改为此： 

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

但是，这也会失败，因为正如 @Rawrplus 提到的，您没有将方法绑定到上下文。 JavaScript 中的 this 很特殊，其工作方式与其他语言不同，它指的是方法的执行上下文，而不是定义上下文。可以使用箭头函数来解决这个问题： 

  handleChange = (text) => {
    this.setState({
      email: text,
      password: text,
    });
  }
Dan
2020-02-15

这无法按预期工作，因为 react-native 具有 2 个不同的 onChange 函数： 

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

第一个 ( onChange ) 的结构与 Web 上的不同： 

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

而第二个，您似乎正在使用，它仅将文本作为字符串提供给您，因此您不必挖掘事件属性层来获取它。您必须将处理程序函数更改为期望文本或绑定到 TextInput 上的 onChange 而不是 onChangeText 。

emeraldsanto
2020-02-15