我无法在事件处理程序中执行props parent方法

时间:2018-06-11 06:40:23

标签: javascript reactjs components

这是我的React组件类( 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(我没有收到任何错误)。我只能在render block中的<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}/>

父类render方法包含子组件:

handleConfirm

我已经尝试在构造中绑定我的tf.nn.embedding_lookup但没有成功。

提前致谢。

2 个答案:

答案 0 :(得分:1)

delete = quale => e => {}处理程序返回一个函数。

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

上述方法有效,因为您正在调用该函数并传入this.props.nome(它返回一个接受e的函数)。

您可以使用内联按钮调用该函数,也可以在handleConfirm()处理程序中调用返回函数。

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

答案 1 :(得分:0)

delete函数返回一个函数,因此为了执行它,你需要像

一样调用它
private createTextMesh(font, text) {
        var shapedText = RtlTextHelper.farsify(text);
        var fontSize = 0.3;
        var textHieght = 0.2;
        var material = new THREE.MeshBasicMaterial({
            color: this.colors.label.normal,
            side: THREE.DoubleSide
        });
        var textGeo = new THREE.TextGeometry(shapedText, {
            font: font,
            size: fontSize,
            height: 0.05,
            curveSegments: 12
        });
        var textMesh = new THREE.Mesh(textGeo, material);
        textGeo.computeBoundingBox();
        var box = new THREE.Box3().setFromObject(textMesh);
        var textLength = box.max.x;
        return {
            mesh: textMesh,
            hieght: textHieght,
            font: {
                size: fontSize
            },
            length: textLength
        };
    }

适用于handleConfirm = (e) => { this.handleClose() this.props.delete(this.props.nome)(e) } ,因为onClick接受一个函数而onClick={this.props.delete(this.props.nome)}返回一个