时间戳

首页 > 解决方案 > 从卡片单击将变量传递给子组件

reactjs - 从卡片单击将变量传递给子组件

问题描述

我是新来的反应，而且我试图将值从卡片点击传递给子组件，我尝试了很多不同的选项但没有工作....请有人帮我解决这个问题。

家长：

import React, { Component } from 'react';
import {
  Card, CardImg, CardBody,
  CardTitle
} from 'reactstrap'; import { Container, Dimmer, Loader } from 'semantic-ui-react'
import logo from './santa.png'
import Divisiones from './division';

class divisionesSisa extends Component {

  constructor() {
    super()
    this.state = {
      division: "1"
    }
    this.methodFetch = this.methodFetch.bind(this)
    this.handleClick = this.handleClick.bind(this);


  }
  componentDidMount() {
    this.methodFetch()
  }

  fetch(endpoint) {
    return window.fetch(endpoint)
      .then(response => response.json())
      .catch(error => console.log(error))
  }

  methodFetch() {
    this.fetch('/####')
      .then(results =>  {
        return results;
      }).then(data => {
        this.setState(data)
      })
  }

  handleClick = (e) =>{
    this.setState({ division: e.target.id });
  }

  render() {
    let { data } = this.state
    return data
      ?
      <div className="row">

        {Object.keys(data).map((key) => {
          return <div className="col-md-2">
            <Card>
              <CardImg style={{ justifyContent: 'center', alignItems: 'center', marginLeft: 0, marginRight: 1 }} src={logo} alt="Card image cap" />
              <CardBody style={{ marginBottom: 10, marginLeft: 0, marginRight: 0 }}>
                <a id={data[key]} href="sisa/division" onClick={() => this.handleClick}><CardTitle align="center" >{data[key]}</CardTitle></a>
              </CardBody>
            </Card>

          </div>

        })}
        <Divisiones division={this.handleClick.bind(this)}/>
      </div>
      : <Container text>
        <Dimmer active inverted>
          <Loader content='Loading' />
        </Dimmer>
      </Container>

  }
}
export default divisionesSisa;

子组件

import React, { Component } from 'react';

class division  extends Component {

constructor(props){
    super(props)
}

componentDidMount(){
    console.log(this.props.division)
}

show(){

}

  render() {
    return(

        <div>
        <h2>{this.props.division}</h2>
        </div>

      );
  }
}

export default division;

我做错了什么？

我接受任何建议来解决这个问题或改变我使用反应的方式

标签： reactjs

解决方案

我相信你应该使用状态在'Divisiones'中设置分裂道具

const { division } = this.state <Divisiones division={ division }

[编辑]

当您收到“未定义”时，我注意到您没有将事件传递给您的 handleClick 函数。

您在这里期待一个事件参数：

handleClick = (e) => {
  this.setState({ division: e.target.id });
}

所以你应该像这样传递参数：

onClick={(event) => this.handleClick(event)}

另外，您还可以在 CardImg 上添加 onClick 功能

推荐阅读