反应-通过回调更改child1的道具并将新值传递给child2

Question

In my app I have a child component, 'Menu', where a 'select' state is updated by a click event, like so:

Menus.jsx (child):

import React, { Component } from 'react';
import { Redirect } from 'react-router-dom';
import Brewing from './Brewing.jsx';
import { withRouter } from 'react-router-dom';


class Menus extends Component{
  constructor (props) {
    super(props);
    this.state = { 
        select: '',      
        isLoading: false,
        redirect: false
    };
  };

  (...)

  gotoCoffee = (index) => {
    this.setState({isLoading:true, select:this.state.coffees[index]})
    setTimeout(()=>{
      this.setState({isLoading:false,redirect:true})
    },5000)
    console.log(this.state.coffees[index])
  }

  renderCoffee = () => {
    if (this.state.redirect) {
      return (<Redirect to={'/coffee/'+this.state.select} />)
    }
  }

  render(){
    const coffees = this.state.coffees;

    return (
      <div>
        <h1 className="title is-1"><font color="#C86428">Menu</font></h1>
        <hr/><br/>
        {coffees.map((coffee, index) => 
          <span key={coffee}>
            <div>
               {this.state.isLoading && <Brewing/>}
               {this.renderCoffee()}
              <div onClick={() => this.gotoCoffee(index)} 
                   style={{textDecoration:'underline',cursor:'pointer'}}>
                  <strong><font color="#C86428">{coffee}</font></strong></div>
              <div>
              </div>
            </div>
          </span>)
        }
      </div>
    );
  }
}

export default withRouter(Menus);

the above works.

---

However, let's say I have another child component, 'Coffee', which should inherit this changed state.

I have learned that passing this event change, and state, from child to another child component, is an anti-pattern. Considering the ways of React, data can only flow from top-to-bottom ie, from parent-to-child.

So have I tried to manage 'select' state from top to bottom, like so:

App.jsx (parent)

class App extends Component {
  constructor() {
    super();
    this.state = {
      select: '',
    };
    this.onSelectChange = this.onSelectChange.bind(this);
  };

then I would use a callback here at 'App.jsx', like so:

onSelectChange(newSelect){ 
    this.setState({ select: newSelect });
  }

and pass it to 'Menus' component, like so:

<Route exact path='/menus' render={() => (
                    <Menus
                      onSelectChange={this.onSelectChange}
                    />
                  )} />

finally, at child 'Menus', I would user event change to change props, which could be passed to other childs etc:

gotoCoffee = (index) => {
    this.setState({isLoading:true})
    this.props.onSelectChange(index)
    setTimeout(()=>{
      this.setState({isLoading:false,redirect:true})
    },5000)
    console.log(this.props.select)
  }

but I'm getting console.log(this.props.select) 'undefined'.

what am I missing?

Answer 1

You are only passing onSelectChange method as a prop to Menu component right now, to access this.props.select, you need to pass select as prop to Menu.

<Route exact path='/menus' render={() => (
  <Menus
    onSelectChange={this.onSelectChange}
    select={this.state.select}
  />
)} />

Whenever this.onSelectChange method gets called and state changes in your App.jsx, your Menu component will be rendered. You can use the updated this.props.select in your render method or in any non static method of your Menu component.

class Menu extends Component {

  render() {
    console.log(this.props.select);

    return (
      ...
    );

  }
}