【React Native】TextInputの内容（value）をstateに入れる

Question

質問事項

React / React Native初心者です。
Todoアプリを作っております。

<TextInput>で入力した内容をstateで保持したいのですが、
onChangeTextイベントでthis setState...とするとシミュレーター側で文字入力ができなくなります。
onChangeTextイベントでステートを触らなければ文字入力は通常通りできますが、入力されたテキストを保持できません。
どのようにしたらよろしいでしょうか。

---

↓下にコードを載せてます。

補足

UpdateItemの中で

this.setState({
      item: text,
});

を試みておりますが、文字入力できない状態になっています。

state{item}に入力されたテキストを保持し、その後AddTodoで
追加のtodoタイトルとして表示させたいと思っています。

export default class TodoInstructions extends React.Component {
  constructor() {
    const todos = [];
    super();
    this.state = {
      todos: todos,
      item: '',
    };
    this.checkTodo = this.checkTodo.bind(this);
    this.deleteTodo = this.deleteTodo.bind(this);
    this.updateItem = this.updateItem.bind(this);
    this.addTodo = this.addTodo.bind(this);
  }

  checkTodo(todo) {
    const todos = this.state.todos.map((todo) => {
      return {id: todo.id, title: todo.title, isDone: todo.isDone};
    });

    const pos = this.state.todos
      .map((todo) => {
        return todo.id;
      })
      .indexOf(todo.id);

    todos[pos].isDone = !todos[pos].isDone;
    this.setState({
      todos: todos,
    });
  }

  updateItem = (text) => {
    console.log(text);
    this.setState({
      item: text,
    });
  };

  addTodo(text) {
    this.setState({
      item: text,
    });
    console.log(this.state.item);
    const getUniqueId = () => {
      return (
        new Date().getTime().toString(36) + '-' + Math.random().toString(36)
      );
    };
    const item = {
      id: getUniqueId(),
      title: this.state.item,
      isDone: false,
    };

    const todos = this.state.todos.slice();
    todos.push(item);
    this.setState({
      todos: todos,
      item: '',
    });
  }

  deleteTodo(todo) {
    const todos = this.state.todos.slice();
    console.log(todos);
    const pos = this.state.todos.indexOf(todo);
    todos.splice(pos, 1);
    this.setState({
      todos: todos,
      item: '',
    });
  }

  render() {
    function TodoForm(props) {
      return (
        <View style={styles.formContainer}>
          <TextInput
            style={styles.form}
            onChangeText={(text) => props.updateItem(text)}
            clearButtonMode="while-editing"
          />
          <View style={styles.addButton}>
            <Button
              title="Add"
              onPress={(text) => props.addTodo(text)}
              color={TodoColors.white}
            />
          </View>
        </View>
      );
    }

    function TodoList(props) {
      const todos = props.todos.map((todo) => {
        return (
          <View>
            <TodoItem
              key={todo.id}
              todo={todo}
              checkTodo={props.checkTodo}
              deleteTodo={props.deleteTodo}
            />
          </View>
        );
      });
      return <View style={styles.list}>{todos}</View>;
    }

    return (
      <View style={styles.container}>
        <View style={styles.sectionContainer}>
          <TodoForm
            item={this.state.item}
            updateItem={this.updateItem}
            addTodo={this.addTodo}
          />
          {this.state.todos.length ? (
            <TodoList
              todos={this.state.todos}
              checkTodo={this.checkTodo}
              deleteTodo={this.deleteTodo}
            />
          ) : (
            <Text style={styles.nothing}>nothing to do!</Text>
          )}
        </View>
      </View>
    );
  }
}

Answer 1

そもそもTextInputにvalueを渡していないのでは？

this.state={
  text:"",
}

changeText = (text) => {
  this.setState({
    text:text
  });
}

<TextInput
  value={this.state.text}
  onChangeText={this.changeText}
>