在 React 的弹出窗口中显示不同的值

Question

我正在尝试在反应中编辑配置文件信息的弹出窗口，并且我希望每个值都有一个按钮，允许用户编辑该特定值。弹出窗口有效，但它只会显示我输入的最后一个值。我认为这是因为每次单击按钮时我都需要重置状态，但我还是相当新的反应，所以我不确定如何去做吧。

我将添加我的代码，但它会从本地数据库中提取一些信息，所以如果您需要我删除一些内容，请告诉我。

这是弹出窗口的组件

import React from 'react'

const Popup = props => {
    console.log(props)
    return(
        <div className='popup-box'>
            <div className='box'>
                <span className='close-icon' onClick={props.handleClose}>x</span>
                {props.content}
            </div>
        </div>
    )
}

export default Popup

这里是出现弹窗的组件页面

import React, { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import { getUser } from '../apiClient'
import Nav from './Nav'
import EditPopup from './EditPopup'

export default function UserProfile (props) {

    

    const [isOpen, setIsOpen] = useState(false)

    const togglePopup = () => {
        setIsOpen(!isOpen)
        
    }

    

    const [user, setUser] = useState({
        user: []
    })
    useEffect(() => {
        getUser(props.match.params.id)
            .then((res) => {
                setUser(res)
            })
            .catch((error) => {
                console.log('error', error.message)
        
            })
    }, [])

    return (
        <div className='globalBackground'>
            <Nav />
            <div className='UserInfoForm'>
                <div className='profile-heading' >
                <h1>General User Information</h1>
                </div>
                <div className='profile-Pic' >
                    <div className='profile-pic-heading'>
                <h2>Profile Picture</h2>
                </div>
                <div className='profile-pic-display'>
                <img src={user.profilePic} style={{ width: '150px', height: '150px' }}
                alt=''
              />
              </div>
              </div>
              <div className='UsernameEdit'>
              <h2>Username</h2>
              <p>{user.username}</p>
              <input type='button' value='Edit' onClick={togglePopup} />
              {isOpen && <EditPopup
                content={<>
                <b>Edit Your Username</b>
                <div className='userNameEditInput'>
                 <input className='usernameEdit' placeholder={user.username} />
                 </div>
                    <button>Save Changes</button>
                    </>}
                        handleClose={togglePopup}
                        />}
              <div />
              <div className='EmailEdit'>
              <h2>Email</h2>
              <p>{user.email}</p>
              <input type='button' value='Edit' onClick={togglePopup} />
              {isOpen && <EditPopup
                content={<>
                <b>Edit Your Email</b>
                <div className='emailEditInput'>
                 <input className='emailEdit' placeholder={user.email} />
                 </div>
                    <button>Save Changes</button>
                    </>}
                        handleClose={togglePopup}
                        />}
              </div>
              <div className='CountryEdit'>
              <h2>Country</h2>
              <p>{user.country}</p>
              <input type='button' value='Edit' onClick={togglePopup} />
              {isOpen && <EditPopup
                content={<>
                <b>Edit Your Country</b>
                <div className='countryEditInput'>
                 <input className='countryEdit' placeholder={user.country} />
                 </div>
                    <button>Save Changes</button>
                    </>}
                        handleClose={togglePopup}
                        />}
              </div>
              <div className='RegionEdit'>
              <h2>Region</h2>
              <p>{user.region}</p>
              <input type='button' value='Edit' onClick={togglePopup} />
              {isOpen && <EditPopup
                content={<>
                <b>Edit Your Region</b>
                <div className='regionEditInput'>
                 <input className='regionEdit' placeholder={user.email} />
                 </div>
                    <button>Save Changes</button>
                    </>}
                        handleClose={togglePopup}
                        />}
              </div>
              <div className='HandicapEdit'>
              <h2>Handicap</h2>
              <p>{user.handicap}</p>
              <input type='button' value='Edit' onClick={togglePopup} />
              {isOpen && <EditPopup
                content={<>
                <b>Edit Your Handicap</b>
                <div className='handicapEditInput'>
                 <input className='handicapEdit' placeholder={user.handicap} />
                 </div>
                    <button>Save Changes</button>
                    </>}
                        handleClose={togglePopup}
                        />}
              </div>
              </div>
            </div>
        </div>
    )
}

如果需要任何其他代码，请告诉我，任何帮助将不胜感激:--)

Answer 1

您可以从UserProfile 中删除状态并将其移动到弹出组件中。

import React from 'react';

const Popup = (props) => {
  const [toggle, setToggle] = useState(false);

  const togglePopup = () => setToggle((prevToggle) => !prevToggle);
  return (
    <>
      <input type="button" value="Edit" onClick={togglePopup} />
      {toggle && (
        <div className="popup-box">
          <div className="box">
            <span className="close-icon" onClick={togglePopup }>
              x
            </span>
            {props.content}
          </div>
        </div>
      )}
    </>
  );
};

export default Popup;

然后您可以在 UserProfile 中使用 EditPopup，如下所示。

{
<div className='UsernameEdit'>
<h2>Username</h2>
<p>{user.username}</p>
<EditPopup
  content={<>
  <b>Edit Your Username</b>
  <div className='userNameEditInput'>
   <input className='usernameEdit' placeholder={user.username} />
   </div>
      <button>Save Changes</button>
  </>       
  }
  />
<div />
}