Question

我无法相信我无法通过setState更新状态。我想更新cardModalOpen状态以关闭Modal。

我添加bind（this），但仍然无法正常工作。

（通过单击卡组件打开模块）

但是，我是通过setState({cardModalOpen: false})函数来完成closeModal()的，但是即使在调用render方法之后，它仍然是正确的。

有人可以解释我在做什么错。

这是我的代码。

index.js

import React, { Component }from 'react';
import { Button, Card, Image, Header, Modal, Form, Input } from 'semantic-ui-react'

class App extends React.Component {    
    state = { cardModalOpen:false }

    showCardModal() {
        this.setState({cardModalOpen:true})    
    }

    closeModal(){
        this.setState({cardModalOpen:false})
    }

    render() {
        const messagesDataNew = [];

        for (var i = 0; i < 3; i++) {
            messagesDataNew.push(
              <Card
                onClick={() => {
                  this.showCardModal();
                }}
              >
                <DetailModal
                  cardModalOpen={this.state.cardModalOpen}
                  closeModal={this.closeModal}
                />
              </Card>
            );
          }

        return <div>{messagesDataNew}</div>;
   }
}

DetailModal.js

import React, { Component }from 'react';
import { Button, Card, Image, Header, Modal, Form, Input } from 'semantic-ui-react'

class DetailModal extends Component{

render(){

    return(
        <Modal open={this.props.cardModalOpen} onClose={()=>{this.props.closeModal()}} >
            <Modal.Header>Select a Photo</Modal.Header>
            <Modal.Content image>
                <Image wrapped size='medium' src='https://react.semantic-ui.com/images/avatar/large/rachel.png' />
                <Modal.Description>
                    <Header>Default Profile Image</Header>
                    <p>We've found the following gravatar image associated with your e-mail address.</p>
                    <p>Is it okay to use this photo?</p>
                </Modal.Description>
            </Modal.Content>
            <Button onClick={()=>{this.props.closeModal()}}>Close</Button>
        </Modal>
    )
  }

  }

export default DetailModal;

这是一个复制了https://codesandbox.io/s/jjk7nw647y问题的密码箱

Answer 1

别忘了绑定状态处理程序功能

constructor(props){
  super(props)
  this.showCardModal=this.showCardModal.bind(this)
  this.closeModal =this.closeModal.bind(this)
}

Answer 2

在您共享的codeandbox中，任何模态都没有可点击的触发元素。这是因为您正在渲染Card的空白内容。

这是我对您的示例https://codesandbox.io/s/l97n95n2om

所做的更改

唯一的区别是第20行-我添加了文本Some text，因此您的Card组件具有有效的可见（可点击）DOM元素。

即使调用了render方法，React.js setState也不更新状态

2 个答案: