Question

我需要从receiveEvent（）函数调用this.props.updateDisplay（）。我不知道该怎么做，甚至可能。

我试图将updateDisplay放置在没有常量的位置，但这没用。

问题在于呈现组件之前调用receveEvent。呈现它的函数是this.props.updateDisplay（）。也许有某种方法可以从父组件传递updateDisplay函数来接收事件？

export function recieveEvent(node) {
currNode = node;
heading = node.data.heading;
if (node.selected === true){
    console.log("displayWidget")
}

}

export class WidgetForCondition extends React.Component {

state = {
    helper: false,
    operators: ["=", ">", "<"],
    chosenOperator: null,
};

handleChange = (event) => {
    this.setState({chosenOperator: event.target.value})
};

handleHeading = (e) => {
    this.setState({heading: e.target.value}, () => {heading = this.state.heading});
    passData(e.target.value)
};

render() {

    return (
        <TrayWidget style={{width: 1000}}>
            <List>
                <ListItem style={{color: "#FFFFFF"}}>
                    <IconButton onClick={() => this.props.updateDisplay()}>
                        <KeyboardArrowLeft style={{color: "#FFFFFF"}}/>
                    </IconButton>
                    Блок с условием
                </ListItem>
                <ListItem>
                    <TextField
                        label="Название"
                        fullWidth
                        margin="auto"
                        defaultValue={heading}
                        onChange={e => this.handleHeading(e)}
                    />
                </ListItem>
                <ListItem style={{color: "#FFFFFF"}}>
                    Условия
                    <IconButton>
                        <AddIcon style={{color: "#FFFFFF"}}/>
                    </IconButton>
                </ListItem>
                <ConditionComponent operators={this.state.operators} handleChange={this.handleChange}/>
            </List>
        </TrayWidget>
    );
}

}

Answer 1

只需使用回调即可。

export function recieveEvent(node, callback) {
    currNode = node;
    heading = node.data.heading;
    if (node.selected === true){
       console.log("displayWidget")
    }
    if (typeof callback === 'function') {
        callback();
    }
}

在您的组件中，将函数传递给recieveEvent。

recieveEvent(node, this.props.updateDisplay);

如果您在this中使用recieveEvent，则也需要绑定上下文。

recieveEvent(node, this.props.updateDisplay.bind(this));

如果您无法传递这样的功能，则必须将其移动到单独的文件中，然后导入并独立调用。

如何从js函数调用组件函数？

1 个答案: