Question

我有一个组件来添加待办事项 AddTodo ，它可以正常工作并使用我添加的待办事项更新状态，并且我有一个组件 TodoItems 来显示{{1中的待办事项}}。我正在使用React Native Tab Navigator在组件之间切换，但我不确定如何将状态<FlatList/>从 AddTodo 组件发送到 TodoItems 组件。

我一直在研究，但在Tab Navigator中找不到解决方案，但Stack Navigator有很多解决方案。

组件AddTodo

this.state.todos

组件TodoItems

export default class AddTodo extends Component {

    constructor(props) {
       super(props);
       this.state = {
           todoText: null,
           todos: []
       }
    }

    onAdd = () => {
        if (this.state.todoText) {
            this.state.todos.push({'todoItem': this.state.todoText});
            this.setState({todos: this.state.todos});
        }
    }

    render() {
        return(
             <View>
                  <TextInput onChangeText={(text) => {
                       this.setState({todoText: text});
                  }} />
                  <TouchableOpacity onPress={() => {
                       this.onAdd;
                  }}>
             </View>
        );
    }

}

组件标签

export default class TodoItems extends Component {

    constructor(props) {
       super(props);
       this.state = {
           todosList: []
       }
    }

    render() {
        return(
            <View>
                  <FlatList
                      data={this.state.todosList}
                      renderItem={(item, index) => {
                          <Text>{item.todoItem}</Text>
                      }} 
                  />
            </View>
        );
    }

}

Answer 1

嗯，我认为你有两个选择：

您可以使用Redux，它允许您全局化您的状态对象，以便您可以在整个应用程序中使用它们，但它可能相当复杂 https://redux.js.org/

或者您可以在AddTodo中渲染TodoItems：

render() {
  return(
     <View>
          <TextInput onChangeText={(text) => {
               this.setState({todoText: text});
          }} />
          <TouchableOpacity onPress={() => {
               this.onAdd;
          }}>
     </View>
     <TodoItems data={this.state.todos} />
  );
}

然后您可以从TodoItems中访问该数据：希望这有帮助！

React Native：使用Tab Navigator将组件状态发送到其他组件

1 个答案: