Я не могу выполнить родительский метод props в обработчике событий

Question

Это мой класс компонентов React (ModalExampleControlled):

 class ModalExampleControlled extends React.Component {
    state = {modalOpen: false}
    handleOpen = () => this.setState({ modalOpen: true })

    handleClose = () => this.setState({ modalOpen: false })
    handleConfirm = () => {
        this.handleClose()
        this.props.delete(this.props.nome)
    }

    render() {
        return (
            <Modal
                trigger={<Button onClick={this.handleOpen}>Show Modal</Button>}
                open={this.state.modalOpen}
                onClose={this.handleClose}
                basic
                size='small'
            >
                <Header icon='remove' content={'Elimina ' + this.props.nome}/>
                <Modal.Content>
                    <p>
                        {this.props.testo}
                    </p>
                </Modal.Content>
                <Modal.Actions>
                    <Button basic color='grey' inverted onClick={this.handleClose}>
                        <Icon name='remove'/> Annulla
                    </Button>
                    <Button color='red' onClick={this.handleConfirm} inverted>
                        <Icon name='checkmark' /> Conferma
                    </Button>
                </Modal.Actions>
            </Modal>
        )
    }
}

Я не могу выполнить this.props.delete(this.props.nome) внутри метода handleConfirm (я не получил никаких ошибок).Я могу сделать это только внутри обработчика onClick в блоке рендеринга:

<Button color='red' onClick={this.props.delete(this.props.nome)} inverted>
<Icon name='checkmark' /> Conferma

Но мне нужно закрыть модальный вызов props.delete().

Метод родительского класса delete таков:

   delete = quale => e => {
        this.setState({
            openModal: '',
            loading: true,
            status: 'In cancellazione '+quale+'...'
        });
        fetch(`${helper.get_url()}/api/delete?quale=${quale}`, {
            method: 'get',
            headers: {
                'Content-Type': 'application/json'
            }
        }).then(r => r.json()).then(r => {
            this.setState({
                file: r.ok ? '\nEliminato: ' + quale +' ('+r.body.length+' righe)' : 'Error ' + quale,
                loading: false
            });
        })
    }

И метод визуализации родительского класса содержит дочерний компонент:

<ModalExampleControlled nome='prodotti' testo='Verranno eliminati i prodotti e il listino associato!'
   delete={this.delete}/>

Я уже пытался связать свой handleConfirm впостроить без успеха.

Заранее спасибо.

Answer 1

Функция

delete возвращает функцию и, следовательно, для ее выполнения вам нужно вызвать ее как

handleConfirm = (e) => {
    this.handleClose()
    this.props.delete(this.props.nome)(e)
}

. Она работает в случае onClick={this.props.delete(this.props.nome)}, потому что onClick принимает функцию, а this.props.delete(this.props.nome) возвращает одну *.1006 *

Answer 2

Обработчик delete = quale => e => {} возвращает функцию.

<Button color='red' onClick={this.props.delete(this.props.nome)} inverted>

Вышеописанное работает, потому что вы вызываете функцию и передаете this.props.nome (которая возвращает функцию, которая принимает e).

Вы можете либо вызвать функцию, как вы это сделали, с помощью встроенной кнопки, либо вам также потребуется вызвать функцию возврата в обработчике handleConfirm().

this.props.delete(quale)(e);