Question

我目前在主组件中有一个类组件和一个功能组件

以下是以下代码段：

类组件

class ComponentForm extends Component{
    constructor(props){
        super(props);
        this.state = {
            modal: true
        }
        this.toggle = this.toggle.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
toggle() {
    this.setState({
        modal: !this.state.modal
    })
}
handleSubmit(values){
    console.log('Current State is: ' + JSON.stringify(values));
    alert('Current State is: ' + JSON.stringify(values));
}
    render(){
        return(
            <Modal isOpen={this.state.modal} toggle={this.toggle}>

               . . . .  

            </Modal>
        )
    }
}

功能组件

function RenderComments({ comments }) {
    return (
        <>
        {
            . . . .
        )}
            <div>
                <Button type="submit" value="submit"}>
                    <i className="fa fa-pencil"></i> Submit Comment</Button>
            </div>
        </>
    );
}

所以我要做的是通过按钮的onClick动作从功能组件中更改类组件的状态。我该如何完成任务？

Answer 1

您必须传递一个函数以将状态从ComponentForm更新为RenderComments作为道具，然后在按钮中以onClick的方式使用

例如，您可以传递toggle()函数（如果这是您希望在子级实现的功能，则可以在RenderComments中实现

function RenderComments({ comments, toggle }) {
    return (
        <>
        {
            . . . .
        )}
            <div>
                <Button type="submit" value="submit" onClick={toggle}>
                    <i className="fa fa-pencil"></i> Submit Comment</Button>
            </div>
        </>
    );
}

Answer 2

您可以通过道具将toggle方法传递给功能组件，然后将其添加到onClick中，这样就可以完成工作

从ReactJS中的功能组件更改类组件的状态

2 个答案: