React NativeでのStateの参照について

現在React NativeでTodoアプリを作っているのですが、入力フォームで入力したものをconsole.log()で確認すると入力したものがundefinedとなっています。この原因を教えてください。
ちなみにReact Nativeは初心者で、書き方等もまだあまりわかっておりません

Appjs
1/**
2 * Sample React Native App
3 * https://github.com/facebook/react-native
4 *
5 * @format
6 * @flow
7 */
8
9import React, { Component } from 'react';
10import { Platform, StyleSheet, Text, View } from 'react-native';
11import TodoInput from './src/components/TodoInput';
12
13export default class App extends Component {
14
15  render() {
16    return (
17      <View style={styles.container}>
18        <View style={styles.main}>
19          <TodoInput />
20        </View>
21      </View>
22    );
23  }
24
25}
26
27const styles = StyleSheet.create({
28  container: {
29    flex: 1,
30    backgroundColor: '#333',
31    paddingTop: 40,
32    alignItems: 'center',
33  },
34  main: {
35    flex: 1,
36    maxWidth: 400,
37    alignItems: 'center',
38  }
39});
40

TodoInputjs
1import React, { Component } from 'react';
2import {
3  View,
4  Text,
5  TouchableOpacity,
6  TextInput,
7  StyleSheet,
8  Button
9} from 'react-native';
10
11const styles = StyleSheet.create({
12  container: {
13    flexDirection: 'row',
14    padding: 20,
15  },
16  textInput: {
17    flex: 3,
18    backgroundColor: '#FFF',
19    marginRight: 5,
20  },
21  button: {
22    flex: 1,
23    backgroundColor: '#008080',
24    marginLeft: 5,
25    alignItems: 'center',
26    justifyContent: 'center',
27    paddingTop: 10,
28    paddingBottom: 10,
29  },
30  buttonText: {
31    color: '#FFF',
32    fontWeight: '500',
33  }
34});
35
36export default class TodoInput extends Component {
37  constructor(props) {
38    super(props);
39    this.state = {
40      text: 'this is text',
41      todo: [
42        'task1',
43        'task2',
44        'task3',
45      ]
46    }
47    this.handleChangeText = this.handleChangeText.bind(this);
48    this.handleSubmitText = this.handleSubmitText.bind(this);
49  }
50
51  handleChangeText(text) {
52    console.log(this.state.text);
53    this.setState({
54      text
55    })
56  }
57
58  handleSubmitText() {
59    this.state.todo.push(this.state.text);
60    this.setState({
61      todo: this.state.todo
62    });
63    console.log(this.state.todo);
64  }
65
66  render() {
67
68    return (
69      <View style={styles.container}>
70        <TextInput
71          style={styles.textInput}
72          value={this.state.text}
73          onChange={e => this.handleChangeText(e.target.value)}
74        />
75        <TouchableOpacity
76          style={styles.button}
77          onPress={() => this.handleSubmitText()}
78        >
79          <Text style={styles.buttonText}>追加</Text>
80        </TouchableOpacity>
81      </View>
82    );
83  }
84}
85
86

行動規範の内容に同意します

回答1件

ベストアンサー

以下のコードのonChangeの部分を変更するといけそうです

        <TextInput
          style={styles.textInput}
          value={this.state.text}
          onChange={e => this.handleChangeText(e.target.value)}
        />

入力内容を取得して処理したい場合onChangeTextを使うことが一般的で今回もこちらが適してるかと思います。
修正すると以下のような感じです

        <TextInput
          style={styles.textInput}
          value={this.state.text}
          onChangeText={text => this.handleChangeText(text)}
        />

投稿2018/10/22 12:14