用户单击按钮时如何显示模态（1）（4个带模态的按钮）

【问题标题】：How to show a modal(1) when user click buttons(4button with 1modal)用户单击按钮时如何显示模态（1）（4个带模态的按钮）
【发布时间】：2022-06-22 21:37:31
【问题描述】：

当我单击添加按钮时，我想在 React 中显示输入。问题是添加按钮是多个。我需要手动提供 id 吗？

我的 li 组件

<div className="content-children">
          {props.showmodal ? (input modal) : (add btn) 
          }
</div>

我的 ul 组件

<ul>
        <Lists  
        setshowmodal={setshowmodal}
        showmodal ={showmodal}
        />

        <Lists  
        setshowmodal={setshowmodal}
        showmodal ={showmodal}
        />
</ul>

【问题讨论】：

标签： simplemodal

【解决方案1】：

你有两个模态。想象模式就像屏幕或路线或全尺寸网页，它们一次显示一个。您正在使用两种模式，例如屏幕。（我确实使用屏幕作为模式）。我可能会做这样的事情。

const [modal,setModal] = useState('');
const closeModal = ()=> setModal('');
return (
  <ul>
    <List modal={modal} onClick={() => setModal("one")} />
    <List modal={modal} onClick={() => setModal("two")} />
  </ul>
);

// Li component
return modal === "one" ? <Li /> : <Btn />;

【讨论】：