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

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

您可以通过props将toggle方法传递给函数组件，并将其添加到例如onhtml中，这将完成任务

Answer 2

您必须传递一个函数，将状态从组件表单更新为渲染命令，作为道具，然后在按钮中使用它作为onClick

例如，您可以传递toggle（）函数（如果这是您希望在子级实现的，那么在渲染命令中：

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