Невозможно выполнить функцию поддержки onClick при использовании функций без сохранения состояния - PullRequest
Новая
       73

Невозможно выполнить функцию поддержки onClick при использовании функций без сохранения состояния

0 голосов
/ 29 мая 2020

Кажется, мне не удается заставить мою модальную кнопку запустить функцию, которую я ей передал.

Я что-то упустил?

Панель управления. js

const Dashboard = () => {

    let show = false;

    const showModal = () => {
        console.log('showing modal');
    };

    const hideModal = () => {
        console.log('closing modal');
    };

    return (
        <div>
            <h1>This is the dashboard</h1>
            <button type="button" onClick={showModal}>Open</button>
            <Modal handleClose={hideModal} show={show}/>
        </div>
    )
};

export default Dashboard;

Модальный. js

const Modal = (handleClose, show, children) => {
    const showHideClass = show ? 'show-modal' : 'hide-modal';

    return (
        <div className={showHideClass}>
            <h1>This is my modal!</h1>
            <p>{children}</p>
            <button onClick={handleClose}>Close</button>
        </div>
    );
};

export default Modal;

У меня было предупреждение: Expected 'onClick' listener to be a function, instead got a value of 'object' type., поэтому я изменил onClick в modal. js до () => handleClose, что отклонило предупреждение, однако ничего не произошло, когда я нажал кнопку ...

1 Ответ

2 голосов
/ 29 мая 2020

Решение

Проблема, с которой вы столкнулись, заключается в том, что вы не деструктурируете переданный объект props. 

const Modal = (handleClose, show, children) => {

следует вместо этого ставить фигурные скобки вокруг аргументов 

const Modal = ({handleClose, show, children}) => {

Краткое объяснение

Свойства, передаваемые функциональному компоненту, представляют собой один объект с ключами, которые соответствуют имени переданного объекта. Форма объекта будет: 

{
   handleClose: [function],
   show: true,
   children: ...
}

Чтобы получить реквизиты, вы можете иметь один аргумент (идиоматически названный props), а затем обращаться к значениям из этого объекта: 

const Hello = (props) => {
   console.log(props.message);
}

Или вы можете использовать назначение деструктуризации (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) для извлечения реквизита в аргументы функции: 

const Hello = ({message}) => {
   console.log(message);
}
...