如何在响应时关闭渲染组件的按钮?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在响应时关闭渲染组件的按钮?相关的知识,希望对你有一定的参考价值。

我无法弄清楚如何关闭渲染的组件。我目前能够在我的第一页上打开模态组件,但是我想在单击按钮时关闭它。我该怎么办?

import React, { Component } from 'react';
  import AddModal from './addmodal';

  class Page extends Component {
    constructor(){
      super();
      this.state = { isModalOpen: false };
    }
    ...//skip
    handleAdd= () =>{
      this.setState({ isModalOpen: true });
    }
    render(){
      return (
        <div>
          <button onClick={this.handleAdd} > Add </button>
          <AddModal isOpen={this.state.isModalOpen} />
        </div>
        )
    }
  }


  import React, { Component } from 'react';

  class AddModal extends Component {
    // ... skip

  handleClose = () => {
    this.setState({ open: false });
  };

    render(){
      return(
        <modal inOpen={this.props.isOpen} >
        <Button onClick={this.handleClose}>
          Okay
        </Button>
          ...//skip
        </modal>
      )
    }
  }

  export default AddModal;
答案

您需要让模态组件调用onClose回调,以便父级可以关闭它:

import React, { Component } from 'react';
  import AddModal from './addmodal';

  class Page extends Component {
    constructor(){
      super();
      this.state = { isModalOpen: false };
    }
    ...//skip
    handleAdd= () =>{
      this.setState({ isModalOpen: true });
    }
    handleClose= () =>{
      this.setState({ isModalOpen: false });
    }
    render(){
      return (
        <div>
          <button onClick={this.handleAdd} > Add </button>
          <AddModal isOpen={this.state.isModalOpen} handleClose={this.handleClose}/>
        </div>
        )
    }
  }


  import React, { Component } from 'react';

  class AddModal extends Component {
    // ... skip

    render(){
      return(
        <modal inOpen={this.props.isOpen} >
        <Button onClick={this.props.handleClose}> // call to parent
          Okay
        </Button>
          ...//skip
        </modal>
      )
    }
  }

  export default AddModal;
另一答案

父组件将决定模态是否打开,因此它拥有子项的状态。

基于@jsdeveloper发布的内容,我认为你可以通过使用相同的函数来处理模态的打开和关闭来减少混乱。

我们将利用toggleModal函数将isModalOpen改为true,当它是false时,反之亦然。它使用一个回调,它接受isModalOpen的先前状态值。

toggleModal = () => {
  this.setState(prevState => ({
    isModalOpen: !prevState.isModalOpen
  }))
}

所以最终文件看起来应该是这样的。

import React, { Component } from 'react';
import AddModal from './addmodal';

class Page extends Component {
  constructor() {
    super();
    this.state = {
      isModalOpen: false
    };
  }
  // ... //skip
  toggleModal = () => {
    this.setState((prevState) => ({
      isModalOpen: !prevState.isModalOpen
    }));
  };

  render() {
    return (
      <div>
        <button onClick={this.handleAdd}> Add </button>{' '}
        <AddModal
          isOpen={this.state.isModalOpen}
          toggleModal={this.toggleModal}
        />
      </div>
    );
  }
}

import React, { Component } from 'react';

class AddModal extends Component {
  // ... skip

  render() {
    return (
      <modal inOpen={this.props.isOpen}>
        <Button onClick={this.props.toggleModal}>Close</Button>
        //... skip
      </modal>
    );
  }
}

export default AddModal;

以上是关于如何在响应时关闭渲染组件的按钮?的主要内容,如果未能解决你的问题,请参考以下文章

Blazor 重新渲染组件块元素 [关闭]

如何通过单选按钮实现动态 UI 渲染? [关闭]

React setState 在调用时渲染组件两次

如何在片段中使用按钮[关闭]

当来自服务器的响应延迟时如何延迟组件渲染

AJAX 响应:数据(JSON、XML)还是 HTML 片段? [关闭]