如何在用户单击按钮时显示模式(1)(4带1模式的按钮)

Question

当我点击添加按钮时，我想在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>

Answer 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 />;