时间戳

首页 > 解决方案 > 当我单击该弹出窗口内的编辑按钮时，我想使用输入字段调用相同的弹出窗口，我该怎么做（如果可能）？

javascript - 当我单击该弹出窗口内的编辑按钮时，我想使用输入字段调用相同的弹出窗口，我该怎么做（如果可能）？

问题描述

这是我负责表格的反应组件，我正在添加图像以供参考我想要实现的目标。

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}>&times;</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>
               
 </>);
}

解决方案可能是什么？我只想单击编辑按钮并想打开另一个弹出窗口，但有输入字段。

以下是截图供参考：

这是表：

在此处输入图像描述

这是弹出窗口：

在此处输入图像描述

标签： javascriptreactjsreact-hooks

解决方案

您可以创建一个称为编辑的状态并使用条件来检查需要在屏幕上呈现的内容。使用这种方式，您可以利用您的弹出窗口。这是代码：

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}>&times;</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>
               
   </>);
}

推荐阅读