Question

即时通讯是新功能，我想尝试将点击卡中的值传递给子组件，我尝试了许多其他选择，但无法正常工作。...可以请有人帮我这个忙。< / p>

父母：

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;

我做错了什么？

我采取任何建议来解决此问题或更改使用react的方式

Answer 1

我相信您应该使用状态在“分区”中设置分区道具

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

[编辑]

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

您希望在此处使用事件参数：

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

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

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

另外，您还可以在CardImg上添加onClick函数

通过卡片点击将变量传递给子组件

1 个答案: