Блог

В настоящее время у меня есть компонент класса и функциональный компонент в моем основном компоненте

Ниже приведен фрагмент кода для:

Компонент класса

 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 кнопки. Как я могу выполнить задачу?

Вы должны передать функцию для обновления состояния из вашего 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>
        </>
    );
}  
  

Вы можете передать toggle метод функциональному компоненту через props и добавить его, например, в onClick, и это выполнит работу