Сложная обработка событий для реакции - PullRequest
0 голосов
/ 02 октября 2019

Я хочу установить внутреннее состояние и позже вызвать обработку события из родительского компонента, однако я не могу вызвать его как обычную функцию.

Мне нужно изменить внутреннее состояние, иначе календарь не закроется, если я не нажму за пределами поля

Это не работает

import React, {useState} from "react"
import PropTypes from "prop-types"

import { DropButton, Box, Calendar} from "grommet"


const CalButton = ( { label,size="medium",onUpdate } ) =>
{
    const [open,setOpen] = useState(false)


    return (
                <Box align="center">
                    <Calendar open={open} range size={ size } onSelect={handleOnSelect} />
                </Box>
            } />
    )
}

CalButton.propTypes = {
    label: PropTypes.string.isRequired,
    size: PropTypes.string,
}

export default CalButton

это работает

import React, {useState} from "react"
import PropTypes from "prop-types"

import { DropButton, Box, Calendar} from "grommet"


const CalButton = ( { label,size="medium",onUpdate } ) =>
{
    const [open,setOpen] = useState(false)


    const handleOnSelect = (value) => {
        Array.isArray(value) ? setOpen(false) : null 
        onUpdate(value)
    }

    return (
                <Box align="center">
                    <Calendar open={open} range size={ size } onSelect={onUpdate} />
                </Box>
            } />
    )
}

CalButton.propTypes = {
    label: PropTypes.string.isRequired,
    size: PropTypes.string,
}

export default CalButton
...