event.target.value undefined on input change-CodePudding

I finally reached a point where I can't figure it out anymore. My goal is pretty simple. I have an input field in a react native component.

I want to save the value of the input text to the redux state (later). But, I always get undefined on e.target.value. This issue has been posted millions of times and I tried so many solutions. None of them worked. I guess I am missing something else.

Btw. The button is just for getting the most recent state in the log.

This is my component:

import React, {
  Component
} from 'react';
import {
  Button,
  StyleSheet,
  TextInput,
  View
} from 'react-native';
import allActions from '../../actions/allActions';
import {
  useDispatch,
  useSelector
} from 'react-redux';
import store from '../../store';

const styles = StyleSheet.create({
  input: {
    height: 40,
    marginTop: 20,
    borderWidth: 1,
    borderColor: '#d3d3d3',
    padding: 10,
  }
});


class Name extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user: ""
    };

    this.handleChange = this.handleChange.bind(this);
    this.getMyState = this.getMyState.bind(this);
  }

  handleChange(event) {
    event.preventDefault();
    this.setState({
      user: event.target.value
    });
  }

  getMyState(event) {
    event.preventDefault();
    console.log(this.state.user);
  }
  render() {

    return ( <
      View >
      <
      TextInput style = {
        styles.input
      }
      onChange = {
        this.handleChange
      }
      /> <
      Button title = {
        'get log'
      }
      onPress = {
        this.getMyState
      }
      /> <
      /View>
    );
  }
}

export default Name;

CodePudding user response：

Use onChangeText instead of onChange like this:

const myInputFunction(text: string) {
  if (/* check whatever you want */) {
    this.setState({inputText: text})
  }
}

<TextInput
  value={this.state.inputText}
  maxLength={1}
  onSubmitEditing={this.textHandler}
  onChangeText={(text) => myInputFunction(text)} // Not sure if you have to write this.function here I am using React State hooks and functional components instead of classes
/>
´´´

CodePudding user response：

For anyone struggeling with this here is my solution I came up with. Thanks to @Maximilian Dietel I realized my initial problem using the onChange instead of onChangeText. After that, I changed the class component to a functional compoenent so that I can use my hooks to save the new state to redux.

import React, {Component} from 'react';
import {Button, StyleSheet, Text, TextInput, View} from 'react-native';
import allActions from '../../actions/allActions';
import {useDispatch, useSelector} from 'react-redux';
import store from '../../store';

const styles = StyleSheet.create({
    input: {
        height: 40,
        marginTop: 20,
        borderWidth: 1,
        borderColor: '#d3d3d3',
        padding: 10,
    }
});

function Name (props) {
    const dispatch = useDispatch();

    /**
     * Save the new user to the state
     * @param text
     */
    const handleChange = (text) => {
        dispatch(allActions.userActions.setUser(text));
    }
        return (
            <View>
                <TextInput
                    style={styles.input}
                    defaultValue={store.getState().user.user}
                    onChangeText={handleChange}
                />
            </View>
        );
}

export default Name;