Question

在我的应用中，我有两个子组件：“ FoodScreen”，“ OperationScreen”和一个父组件“ Desk”。正在将Json变量数组传递给FoodScreen组件以选择项目。

当我按下Child1组件中的按钮时，它应该为父级传递值，然后父级应为child2传递值

桌面组件为：

const nameList = [
        {
            "id": 111,
            "name": "Leanne Graham",
            "username": "Bret"
            }
        },
        {
            "id": 112,
            "name": "Ervin Howell",
            "username": "Antonette"
            }
        }
    ];

    let selectedItem = null;
    let item = (selectedItem == null) ? 0 : nameList.find(x => x.id === selectedItem);

class SalesDesk extends Component {

    render() {
        return <div>
            <div className="Background">
                <Header/>
                <div className="Main">
                    <FoodScreen itemlist={nameList}/>
                    <OperationScreen item={item}/>
                </div>
                <Footer/>
            </div>
        </div>
    }
}

通过“ FoodScreen组件”中的点击事件来更新“选择ID”状态，例如：

class SdFoodScreen extends Component {
  render() {
    return <div className="sdFoodScreenMain">
        {
            this.props.itemlist.map(items =>
                <div className="sdFoodBoxes" key={items.id}>
                  {items.id}
                  {items.name}
                  <button onClick={() => this.selectItem(items.id)}> Select ID </button>
                </div>
            )
        }
    </div>;
  }

  constructor(props) {
    super(props);
    this.state = {
      selectedItem : null
    }
  }

  selectItem(itemID) {
    this.setState({
      selectedItem : itemID
    })
  }
}

“我的第二个孩子”组件为：

class OperationScreen extends Component {
  render() {
    let selectedItem = this.props.item;
    console.log(selectedItem);
  }
}

每当我单击FoodScreen组件中的按钮时，该值都应传递给Parent'Salesdesk'组件，这样我就可以将该值传递给Child2组件，并在控制台上打印。

我希望我有一种方法可以摆脱Parent类中的If条件，使其具有更好的代码结构，这对React来说是新的。

Answer 1

您将需要将回调函数传递给子元素，以更新父类中的值。您可以通过以下方式对其进行重组-

在 FoodScreen 中，更新 onClick 处理程序以调用回调函数并将该项目作为参数传递-

...
<button onClick={() => this.props.onSelect(item)}> Select ID </button>
...

然后在 SalesDesk 类上，您可以在使用 FoodScreen 组件

时传递回调处理程序。

<FoodScreen itemlist={nameList} onSelect={this.updateSelection}/>

您可以使用此新的回调函数更新所选项目

updateSelected = (item) => {
  this.setState({selectedItem: item});
}

现在您可以将 selectedItem 传递给 OperationScreen

<OperationScreen item={selectedItem}/>

编辑：

See Demo

反应：将Child1状态值传递给父级，然后从父级传递回Child2

1 个答案: