道具传递的不能射击方法

Question

使用 React，我的 app.js 中有一个简单的 console.log('hello')。我通过 props 将它传递给一个组件 "thumbnails group"，它将映射到一个数组，创建 "thumbnails"，并且它们中的每一个都应该使用 onClick 触发该方法。当我这样做时，什么也没有发生。我错过了什么？

App.js

escolheTextura = () => {
    console.log('hello')
};


    <ThumbnailGroup

     escolheTextura={this.escolheTextura}/>

ThumbnailGroup.js

 return (
            <div className={["column", "group"].join(' ')}>
                {
                    props.texturas.map(thumbnail => {
                            return <Thumbnail
                                onClick={() => props.escolheTextura()}>
                                {thumbnail}
                            </Thumbnail>
                        }
                    )
                }
            </div>
    );

Thumbnail.js

    return (

        <div className={["button is-primary", "thumbnail"].join(' ')}>
            <span>
                <figure className={"image is-32x32"}>
                    <img src={"image is-32x32"}/>
                </figure>
            </span>
        </div>
    )
};

Answer 1

你应该通过 props.escolheTextura 更进一步。 DOM 元素接收点击，而不是 React.js 组件所以，你必须将你的功能传递给 Thumbnail 组件并制作一些 DOM 元素，说 div , 处理点击事件:

ThumbnailGroup.js

return (
        <div className={["column", "group"].join(' ')}>
            {
                props.texturas.map(thumbnail => {
                        return <Thumbnail
                            escolheTextura={props.escolheTextura}>
                            {thumbnail}
                        </Thumbnail>
                    }
                )
            }
        </div>
);

ThumbnailGroup.js

return (

    <div onClick={this.props.escolheTextura} className={["button is-primary", "thumbnail"].join(' ')}>
        <span>
            <figure className={"image is-32x32"}>
                <img src={"image is-32x32"}/>
            </figure>
        </span>
    </div>
)

Answer 2

ThumbnailGroup.js

return (
         <div className={["column", "group"].join(' ')}>
         {
             props.texturas.map(thumbnail => {
                return <Thumbnail
                          escolheTextura ={props.escolheTextura}>
                          {thumbnail}
                       </Thumbnail>
              }
          }
            </div>
    );

Thumbnail.js

    return (
        <div onClick={props.escolheTextura} className={["button is-primary", "thumbnail"].join(' ')}>
            <span>
                <figure className={"image is-32x32"}>
                    <img src={"image is-32x32"}/>
                </figure>
            </span>
        </div>
    )
};

道具传递的不能射击方法

Cant fire method passed by props

javascript

reactjs

react-props