如何将项目添加到列表

Question

MainPage主页

    export class Diet extends Component {
      constructor(props) {
        super(props);
        this.state = {
          list: [],
        };
      }
    
      addToList(item) {
        const list = [...this.state.list, item];
        this.setState({ list });
      }
    
      render() {
        return (
          <View>
            <Text style={styles.txtYourMeals}>Your Meals</Text>
                     <FoodList items={this.state.list} />  <--------
          </View>
        );
      }
    }
    
 export default Diet;

FoodList食物清单

import React, { Component } from "react";

export class FoodList extends Component {
  render() {
    return (
      <View>
        <Content>
          <List>
            <ListItem>
              <Text>FoodCreated</Text>
            </ListItem>
          </List>
        </Content>
      </View>
    );
  }
}

export default FoodList;

FoodCreate食品创造

export default function FoodCreate({ navigation: { goBack } }) {
  const [FoodName, setFoodName] = useState("");

  return (
    <Container>
      <Header>
        <Left>
          <Button transparent>
            <Icon
              name="arrow-back"
              onPress={() => goBack()}
              style={{ fontSize: 25, color: "red" }}
            />
          </Button>
        </Left>
        <Body>
          <Title>Add Food</Title>
        </Body>
        <Right>
          <Button transparent>
            <Icon  <-----------
              name="checkmark"
              style={{ fontSize: 25, color: "red" }}/>
          </Button>
        </Right>
      </Header>
        <TextInput
          placeholder="Food Name"
          placeholderTextColor="white"
          style={styles.inptFood}
          value={FoodName}
          onChangeText={(FoodName) => setFoodName(FoodName)}
        />
    </Container>
  );
}

So I'm trying to let the user type a Food Name in a TextInput in the FoodCreate page and pressing the button checkmark to add that food name in the FoodList which is displayed in the MainPage .因此，我试图让用户在FoodCreate页面的 TextInput 中键入Food Name ，然后按下按钮复选checkmark以将该食物名称添加到MainPage中显示的FoodList中。 I started but I have no idea on how to proceed.我开始了，但我不知道如何进行。 It's a basic grocery shopping list in which you type a food name and add it to your list and every time you do that you insert a new item.这是一个基本的杂货购物清单，您可以在其中键入食物名称并将其添加到您的清单中，每次您这样做时，您都会插入一个新项目。

Answer 1

What you need is to tell the parent component ie MainPage that a new food item has been created.您需要告诉父组件，即MainPage ，已经创建了一个新的食物项目。

This should look something like this in your MainPage这应该在您的MainPage中看起来像这样

render() {
        return (
          <>
            <FoodCreate addToList={addToList}/>
            <View>
              <Text style={styles.txtYourMeals}>Your Meals</Text>
                     <FoodList items={this.state.list} />  <--------
            </View>
        );
      }

Now, this addToList would be available to your FoodCreate component which you can call whenever you create the food item.现在，这个addToList将可用于您的FoodCreate组件，您可以在创建食物项目时调用该组件。 Also, I don't see any Save button in your FoodCreate .此外，我在您的FoodCreate不到任何Save按钮。 I think that's where you might want to add a click listener so that whenever user clicks on that button, you call the addToList method我认为您可能希望在此处添加单击侦听器，以便每当用户单击该按钮时，您都会调用addToList方法

如何将项目添加到列表

问题描述

1 个解决方案

解决方案1
0 2021-04-09 19:10:25

如何将项目添加到列表

问题描述

1 个解决方案

解决方案1 0 2021-04-09 19:10:25

解决方案1
0 2021-04-09 19:10:25