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

问题描述

当单击更新按钮时，模态弹出两次，第一个显示正确的 item.id，但第二个是列表中的最后一个值.任何帮助表示赞赏.尝试在模态标签内添加 {this.props.child} 但它不起作用.

任何帮助将不胜感激.

 this.state = {ModalText: '模态内容',可见:假，当前ID:0，确认加载:假，}}showModal = () =>{this.setState({可见:真实，});}handleOk = () =>{this.setState({ModalText: '模态将在两秒后关闭',确认加载:真实，});setTimeout(() => {this.setState({可见:假，确认加载:假，});}, 2000);}handleCancel = () =>{console.log('点击取消按钮');this.setState({可见:假，});}使成为(){const { 可见，confirmLoading，ModalText } = this.state;返回(<div><ul>{this.props.user.map(item => (<li key={item.id}>此人是 {item.name}，他/她的电子邮件是{item.email}.<Button type="primary" onClick={this.showModal}>更新</按钮><模态标题="标题"可见={可见}onOk={this.handleOk}确认加载={确认加载}onCancel={this.handleCancel}>{item.id}<UpdateModal/></模态>))}

)}}

解决方案

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

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

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.

any help would be appreciated.

 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>
    )
  }
 }

解决方案

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.

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屋！