使用 handleClick 从 React 中的卡片组件获取道具

Question

I have three Components -> A Game component which renders a GameBoard component, which renders various BeerCard Components.

The BeerCards Components are just Cards - that render from data passed as props via the GameBoard, which comes via an api call to a server and stores in the state.

I'm trying to access the props of the individual card {name, brewery, ID} via a click function passed down from the Game component, this then adds the props to the state in the Game component, which will be then used to submit the selected cards back as a POST to the server. But can't fathom how to access those? Any ideas?

class GameBoard extends Component {
    constructor(props) {
        super(props);
        this.state = { beers: [], error: null };
    }
    componentDidMount() {
        axios.get('/api/game').then(
            result => {
                this.setState({ beers: result.data.beer });
            },
            error => {
                this.setState({ error });
            }
        );
    }

    render() {
        const beerList = this.state.beers.map(beer => (
            <BeerCard
                name={beer.name}
                brewery={beer.brewery}
                photo={beer.photoURL}
        key={beer._id}
        id={beer._id}
        onClick={this.props.onClick}
            />
        ));
        return <div className="row">{beerList}</div>;
    }
}

BeerCard Component

const BeerCard = ({ name, brewery, photo, onClick }) => (
    <div className="col-12 col-md-6 col-xl-4">
        <div className="card" style={{width: '20rem', height: '20rem'}} onClick={onClick}>
            <img className="card-img-top" src={photo} alt={name}></img>
            <div className="card-body">
                <h3 className="card-title">{name}</h3>
                <h5 className="card-text">{brewery}</h5>
            </div>
        </div>
    </div>
);

Game Component

class Game extends Component {
    constructor(props) {
    super(props);
    this.state = { entry: []}
    this.handleClick = this.handleClick.bind(this, props)
    }
handleClick(props) {
  console.log(this.props)
}
    render() {
        return (
      <div>
         <GameBoard
          onClick={this.handleClick}
         /> 
      </div>

    )
    }
}
export default Game;

Answer 1

I'd use a context. Because the Game component is where the data is going to be arranged and populated then to post, right?

I don't know if it is the best option, but with a context you could write, and access data from every level of your app without having to pass it through props.

I'd create all the logic of the api on the game component (or the most upper level component), and make it the provider of the context. So every child component can access to the functions.

Update us!

Answer 2

in GameBoard class change onClick={this.props.onClick} to onClick={() => this.props.onClick(bear)}
and in Game class make these changes:

class Game extends Component {
    constructor(props) {
    super(props);
    this.state = { entry: []}
    this.handleClick = this.handleClick.bind(this)
    }
handleClick(bear) {
  console.log(bear)
}
    render() {
        return (
      <div>
         <GameBoard
          onClick={this.handleClick}
         /> 
      </div>

    )
    }
}
export default Game;

I suggest you use redux to mange the states and actions