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

问题描述 投票:0回答:1

我有三个组件->一个游戏组件,它呈现一个GameBoard组件,它呈现各种BeerCard组件。

[BeerCards组件仅是Cards-由通过GameBoard作为道具传递的数据进行渲染,这些数据是通过api调用到达服务器并存储在状态中的。

我正在尝试通过从Game组件传递来的点击功能来访问单个卡片{名称,啤酒厂,ID}的道具,然后将道具添加到Game组件中的状态,然后将其使用将选定的卡作为POST提交回服务器。但是无法理解如何访问这些资源吗?有什么想法吗?

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组件

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>
);

游戏组件


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;
javascript reactjs
1个回答
0
投票

我会使用上下文。因为游戏组件是数据的整理和填充位置,然后发布,对吧?

我不知道这是否是最好的选择,但是您可以编写上下文,并且无需通过道具就可以访问应用程序各个级别的数据。

我将在游戏组件(或最高级组件)上创建api的所有逻辑,并使其成为上下文的提供者。因此,每个子组件都可以访问功能。

更新我们!


0
投票

GameBoard类中将onClick={this.props.onClick}更改为onClick={() => this.props.onClick(bear)} and in Game`类,请执行以下更改:

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;

我建议您使用redux来管理状态和动作

© www.soinside.com 2019 - 2024. All rights reserved.