时间戳

首页 > 解决方案 > 使用 handleClick 从 React 中的卡片组件获取道具

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

问题描述

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

BeerCards 组件只是卡片 - 从通过 GameBoard 作为 props 传递的数据进行渲染，游戏板通过对服务器的 api 调用传入并存储在状态中。

我正在尝试通过从 Game 组件传递的 click 函数访问单个卡 {name, brewery, 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>;
    }
}

啤酒卡组件

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;

标签： javascriptreactjs

解决方案

我会使用上下文。因为游戏组件是数据将被安排和填充然后发布的地方，对吗？

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

我会在游戏组件（或最上层组件）上创建 api 的所有逻辑，并使其成为上下文的提供者。因此每个子组件都可以访问这些功能。

更新我们！

推荐阅读