функция переданная в onClick возвращает undefined

Question

Есть три файла:

панель, в которую вмонтирована кнопка Button, (DevicePhone)
Button, по нажатию на которую должно отображаться меню (Button)
само меню (ChooseMenu)

почему-то по нажатию на кнопку ничего не происходит... Начал смотреть через React Dev Tools понял что в Button, в пропс onClick вместо фунции showit, класса ChooseMenu передалось undefined

что я хочу что бы менялось

Вот прикрепляю:

import 'bootstrap/dist/css/bootstrap.min.css';
import '../index.css'
import React from 'react';
import Button from './Button'
import ChooseMenu from '../ChooseMenu/ChooseMenu';

function DevicePhone(props) {
    return (
        <div className="col suggestions col-xs Rad-border position-relative" >
            <h1 className="device-name"> How to choose<br /> a Smartphone</h1>
            <div className="container">
                <div className="row marg-bottom">
                    <img src={props.img} className="col img" alt='Phone-Example' style={{ 'width': '420px', 'height': '420px' }}></img>
                    <div className="col position-relative specs">
                        <h2 className="specs-menu-name">Main specifications</h2>
                        <table className="table table-hover">
                            <thead className="table-light">
                                <tr>
                                    <th scope="col">#</th>
                                    <th scope="col">Specs</th>
                                    <th scope="col" colspan="2" className="text-center"> Which same </th>
                                </tr>
                            </thead>
                            <tbody className="table-dark">
                                {props.table.map((uy, index) =>
                                    <tr>
                                        <th>{index + 1}</th>
                                        <td>{uy.name}</td>
                                        <td colspan="2" className="text-center">{uy.description}</td>
                                    </tr>
                                )}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div >
            <Button onClick={ChooseMenu.showit}></Button>
        </div >
    )
}

export default DevicePhone

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import '../index.css'

function Button(props) {
    return (
        <button className="border-rad btn btn-phone-anchor btn-outline-light position-absolute bottom-0 start-50 translate-middle-x container-fluid"
            style={{ 'margin-top': '49px', 'font-family': 'Sarpanch' }}
            onClick={props.onClick}>
            CHOOSE
        </button>
    )
}

export default Button

import React from "react"
import '../index.css'

class ChooseMenu extends React.Component {
    constructor(props) {
        super(props);
        this.state = { visible: true };
        this.showIt = this.showit.bind(this);
    }
    showit() {
        this.setState(state => ({ visible: !state.visible }));
    }
    render() {
        if (this.state.visible === true) {
            return < div > hello world </div >
        }
        else {
            return null
        }
    }
}
export default ChooseMenu

Answer 1

ChooseMenu - компонент с собственным состоянием и это состояние нельзя изменить снаружи (то есть метод showit() нельзя вызывать за пределами этого компонента).

Нужно избавиться от состояния внутри ChooseMenu и перенести его в DevicePhone:

const [visible, setVisible] = useState(false);
const toggleVisible = () => setVisible(prev => !prev);

Тогда в компонент ChooseMenu можно будет передать visible, а в Button передать функцию для изменения состояния toggleVisible:

<Button onClick={toggleVisible}></Button>
<ChooseMenu visible={visible} />

ChooseMenu:

import React from "react"
import '../index.css'

class ChooseMenu extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        if (this.props.visible === true) {
            return <div> hello world </div>
        }
        else {
            return null
        }
    }
}
export default ChooseMenu

БЛОГ НА HUSL

функция переданная в onClick возвращает undefined

Ответы (1 шт):