React Antd在array.map上显示多个模态 [英] React Antd showing multiple modal on array.map

问题描述

单击更新按钮时，模式会弹出两次，第一个显示正确的item.id，但是第二个是列表中的最后一个值.任何帮助表示赞赏.尝试在模式标记内添加{this.props.child}，但无效.

When clicking the update button the modal pops twice, the first one shows the correct item.id but the second one is the last value on the list. any help is appreciated. tried adding {this.props.child} inside the modal tag but it doesn't work.

任何帮助将不胜感激.

 this.state = {
  ModalText: 'Content of the modal',
  visible: false,
  currentId : 0,
  confirmLoading: false,
 }
}

showModal = () => {
 this.setState({
  visible: true,
 });
}



handleOk = () => {
    this.setState({
      ModalText: 'The modal will be closed after two seconds',
      confirmLoading: true,
    });
    setTimeout(() => {
      this.setState({
        visible: false,
        confirmLoading: false,
      });
    }, 2000);
  }

  handleCancel = () => {
    console.log('Clicked cancel button');
    this.setState({
      visible: false,
    });
  }

  render(){
    const { visible, confirmLoading, ModalText } = this.state;
    return(
      <div>
        <ul>
          {this.props.user.map(item => (
            <li key={item.id}>
              The person is {item.name} and the his/her email is 
 {item.email}.

            <Button type="primary" onClick={this.showModal}>
              Update
            </Button>
            <Modal title="Title"
              visible={visible}
              onOk={this.handleOk}
              confirmLoading={confirmLoading}
              onCancel={this.handleCancel}

            >
              {item.id}
              <UpdateModal/>

            </Modal>

            </li>
          ))}
        </ul>
        </div>
    )
  }
 }

推荐答案

我认为，如果您要通过开发人员工具查看DOM，您会发现模式不会弹出两次，而是每个项目弹出一次，并且表示最后一项的只是顶部的那一项.在您的状态下，所有模态(每个项目都渲染一个模态)都由相同的 visible 布尔值控制，因此可以通过单击其中的任何按钮将其设置为 true 该列表将显示所有模态.

I think if you were to look at the DOM via developer tools, you would find that the modal didn't pop up twice, but rather once per item and that the one showing the last item is just the one on top. All of your modals (you are rendering one per item) are being controlled by the same visible boolean in your state, so setting that to true by clicking any of the buttons in the list will show all of the modals.

有几种不同的方法可以解决此问题.一种选择是在 li s之外具有单个模式，并在单击特定按钮时将商品ID设置为状态，然后在模式中使用该状态.

There are a few different ways you could fix this. One option is to have a single modal outside of the lis and set the item id into state when a particular button is clicked and use that state in the modal.

这篇关于React Antd在array.map上显示多个模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！