reactjs - React Native 在 Redux 中获取 TextInput 值

Question

在使用 vanilla React Native 一段时间后，我目前正在学习如何使用 Redux。我试图了解如何存储 TextInput 的值。以前我只是将值存储在状态中。我尝试了一些方法，包括下面的代码示例。

目前，todoInput.value 尚未定义。我还尝试直接将 TextInput 的 value 属性分配给用 let 定义的变量，但这也保持未定义。

如何更改代码以使 TextInput 的值不会未定义？

import React from 'react';
import { View, Button, TextInput } from 'react-native';
import { connect } from 'react-redux';
import { addTodo } from '../actions';

const addNewTodo = (dispatch, value) => {
  dispatch(addTodo(value));
}

const AddTodo = ({ dispatch }) => {
  let todoInput;

  return (
    <View>
      <TextInput ref={inputRef => todoInput = inputRef} />
      <Button title="Add Todo" onPress={() => addNewTodo(dispatch, todoInput.value)}></Button>
    </View>
  );
};

export default connect()(AddTodo);

Answer 1

您可以创建一个有状态组件，以便将值传递给组件状态，以便可以在中使用多个地方。

根据您的场景(假设组件已连接)

class AddTodo extends React.Component {
  state = {
    todoInput: null
  }

  addNewTodo = () => {
    this.props.dispatch(addNewTodo(this.state.todoInput))
  }

  render() {
    return (
      <View>
        <TextInput onChangeText={text => this.setState({todoInput: text})} value={this.state.todoInput} {...{/*Other Props*/}}/>
        <Button title="Add Todo" onPress={this.addNewTodo}></Button>
      </View>
    )
  }
}