[英]I want to call the same popup with input fields when I click on edit button which is inside that popup, how can I do this (if possible)?
This is my react component which is responsible for a table, I am adding images for reference of what I am trying to achieve.这是我负责表格的反应组件,我正在添加图像以供参考我想要实现的目标。
const ClientsTable = (props) =>{
return(<>
<tr>
<td>{props.num}</td>
<td>{props.name}</td>
<td>{props.status}</td>
<td><Popup trigger={<button className="btn btn-outline-info" style ={{width:'80%'}}>View</button>} modal>
{ close =>(
<span className ="justify-content-center">
<div className="card col-md-8 mx-auto infoCard">
<button className="close" onClick={close}>×</button>
<div className="card-body">
<h5 className="card-title">{props.name}</h5>
<h6 className="card-subtitle mb-2 text-muted">{`${props.address}, ${props.city}`}</h6>
<p className="card-text">{props.ps}</p>
<h6 className="card-subtitle mb-2">{`Phone: ${props.phone}`}</h6>
<h6 className="card-subtitle mb-2">{`Adhar no.: ${props.adhar}`}</h6>
<h6 className="card-subtitle mb-2">{`Dates: ${props.hrdates}`}</h6>
{/* EDIT BUTTON */}
<button className="btn btn-info me-3" style ={{width:"100px"}}>Edit</button>
<button className="btn btn-danger" style ={{width:"100px"}}>Delete</button>
</div>
</div>
</span>
)}
</Popup>
</td>
</tr>
</>);
}
What might be the solution?解决方案可能是什么? I just want to click on edit button and want to open another popup, but having input fields.
我只想单击编辑按钮并想打开另一个弹出窗口,但有输入字段。
Here are screenshots for reference:以下是截图供参考:
This is table:这是表:
This is popup:这是弹出窗口:
You can create a state called edit and using condition to check what need to be rendered on the screen.您可以创建一个名为编辑的 state 并使用条件来检查需要在屏幕上呈现的内容。 Using that way you can utilize your popup.
使用这种方式,您可以利用您的弹出窗口。 Here is the code:
这是代码:
function ClientsInfo(props) {
const [edit, setEdit] = useState(false);
return <span className ="justify-content-center">
<div className="card col-md-8 mx-auto infoCard">
<button className="close" onClick={props.close}>×</button>
<div className="card-body">
{!edit ?
<h5 className="card-title">{props.name}</h5>
<h6 className="card-subtitle mb-2 text-muted">{`${props.address}, ${props.city}`}</h6>
<p className="card-text">{props.ps}</p>
<h6 className="card-subtitle mb-2">{`Phone: ${props.phone}`}</h6>
<h6 className="card-subtitle mb-2">{`Adhar no.: ${props.adhar}`}</h6>
<h6 className="card-subtitle mb-2">{`Dates: ${props.hrdates}`}</h6>
: (<>{/*Your Input Fields Here*/}</>) }
{/* EDIT BUTTON */}
<button className="btn btn-info me-3" style ={{width:"100px"}} onClick={()=>setEdit(true)}>Edit</button>
<button className="btn btn-danger" style ={{width:"100px"}}>Delete</button>
</div>
</div>
</span>
}
const ClientsTable = (props) =>{
return(<>
<tr>
<td>{props.num}</td>
<td>{props.name}</td>
<td>{props.status}</td>
<td><Popup trigger={<button className="btn btn-outline-info" style ={{width:'80%'}}>View</button>} modal>
{ close =>(<ClientsInfo {...props, close: close}></ClientsInfo>)}
</Popup>
</td>
</tr>
</>);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.