为什么将函数从父类组件传递给子功能组件不起作用？

Question

我正在尝试将 props 中的父类组件中的方法传递给子功能组件。

父组件基本上只是将数据从数据库发送到“绘制”组件本身的功能组件。 在功能组件内部我有<option>，我想console.log()来自功能组件的数据，这意味着更改的处理程序将在类组件中，只是将它传递给子功能组件。

我在 ReactJS 文档中阅读了执行此操作的方法，但由于某种原因它不起作用。没有错误，但没有任何内容打印到控制台。

父类组件：

export default class ProductCardComponent extends Component{


  constructor(props) {
      super(props)

      this.handleClick = this.handleClick.bind(this)
      this.onChangedColor = this.onChangedColor.bind(this)

      this.state = {
          product:  [],
          currentPage: 1,
          cardsPerPage: 9,

      }
  }


onChangedColor(e) {
    console.log("sup")
    console.log(e)
    alert("here")
}



render() {



    const renderCards = currentCard.map( (card, index) => {
            return <Col key={index}> <FunctionalProductCardComponent 
                                      product={card} 
                                      key={card._id} 
                                      onChange= {(e) => this.onChangedColor(e)} />
                    </Col>
        } );

        return (
        <div id="centeredRowForPagination">
            <div>
                <Row id="RowIdForCentering">
                    {renderCards}
                </Row>
            </div>
            <div id="centeredRowForPagination">
                <Row>
                        <Pagination id="page-numbers">
                                {renderPageNumbers}
                        </Pagination>
                </Row> 
            </div>
        </div>
    )
}
}

子功能组件：

const myRef = createRef()

const FunctionalProductCardComponent = props => {



var data = [];
for (let i = 0 ; i < props.product.color.length ; i++ ) { 
    data.push( {'value': props.product.color[i], 'label': props.product.color[i] } )
}
console.log(data)
return (
    // giving the div id only for design pourpse
<div id="ProductCard">
    <Col>
        <Card style={{ width: '18rem'}}>


            <Card.Img variant="top" src={imageUrl} id='ringImgId'/>

            <Card.Body>
                <Card.Title>Card Title</Card.Title>
                <Card.Text>

                    }
                    <tr><td>Name:    {props.product.name}</td></tr>
                    <tr><td>Price: {props.product.price}</td></tr>
                    <tr><td>Gender:  {props.product.gender}</td></tr>
                    <tr><td>Serial:  {props.product.serial}</td></tr>
                </Card.Text>
            </Card.Body>

                <Accordion>
                    {/* <Card> */}
                        <Card.Header>
                        <Accordion.Toggle className="accordionToggleButton" as={Button} variant="link" eventKey="0">
                            Size :
                        </Accordion.Toggle>
                        </Card.Header>
                        <Accordion.Collapse eventKey="0">
                            {/* <Card.Body> */}
                                <Select  ref={myRef} required className='form-control' options={props.product.size} placeholder ={'Select a color'} onChange={(selectedValue) => { props.onChange(()=>{{return selectedValue}}); }} />
                                    {/* <Select className="form-control" options={props.product.size} onChange= {(selectedValue) => {
                                        this.setState({value: selectedValue});
                                        this.props.onChange(() => {return selectedValue})
                                    }} 
                                    // value={this.state.value}
                                     /> */}
                            {/* </Card.Body> */}
                        </Accordion.Collapse>
                    {/* </Card> */}
                    {/* <Card> */}
                        <Card.Header>
                        <Accordion.Toggle className="accordionToggleButton" as={Button} variant="link" eventKey="1">
                            Color : 
                        </Accordion.Toggle>
                        </Card.Header>
                        <Accordion.Collapse eventKey="1">
                            <Card.Body>
                                <Select required className='form-control' options={data} placeholder ={'Select a color'} onChange={(selectedValue) => { props.onChange(()=>{{return selectedValue}}); }} />
                            </Card.Body>
                        </Accordion.Collapse>
                    {/* </Card> */}
                </Accordion>
                {/* () => {
      return selectedValue;
    } */}
            <Card.Body>
                <Card.Link href="#">Buy</Card.Link>
                <Card.Link id="addToCartBtn" href="#">Add To Cart</Card.Link>
            </Card.Body>


        </Card>
    </Col>
</div>

) }

导出默认的FunctionalProductCardComponent；

它现在调用方法，但不传递值。

Answer 1

在ProductCardComponent 组件中：

onChange= {(e) => this.onChangedColor(e)}

应该替换为

onChange ={(e)=> {this.onChangedColor(()=> {return e()})}}//e is a function

然后从FunctionalProductCardComponent，在

this.props.onChange(()=>{return selectedValue});

匿名函数返回onChangedColor()使用的值

这就是为什么它的参数应该作为一个函数来处理：

onChangedColor(e) {
    console.log("sup")
    console.log(e()) //e is a function passed in FunctionalProductCardComponent
    alert("here")
}`