React弹窗输入框无法修改：onChange函数失效问题求助

核心问题 #

编辑弹窗的输入框value绑定了父组件传入的props值，但内部状态未与输入框关联。编辑时props值固定不变，输入框内容始终被props初始值覆盖，导致无法修改；同时内部状态的更新未作用到视图上，状态与视图完全脱节。

修复步骤 #

1. 用props初始化弹窗内部状态：弹窗打开时，将父组件传入的编辑初始值作为内部state的默认值。
2. 输入框value绑定内部state：让输入框内容与弹窗自身状态联动，确保输入时视图实时更新。
3. 移除无效的preventDefault：输入框onChange事件无需阻止默认行为，该操作完全多余。

修改后的AccountPopUp组件代码 #

const AccountPopUp = (props) => {
    // 用传入的props初始化内部状态
    const [name, setName] = useState(props.name);
    const [phone, setPhone] = useState(props.phone);
    const [email, setEmail] = useState(props.email);

    const handleSubmit= () =>{
        axios.put(`http://localhost:9000/api/settings/${props.id}`,{
            name, phone, email
        }).then(props.handleClose)
        .catch((e)=>{
            console.log(e);
        });
    }

    return (
        <div className="popup-box">
            <div className="box">
                <label htmlFor="name">Name</label>
                {/* value绑定内部state，实现双向联动 */}
                <input type="text" name='name' id='name' value={name} onChange={(e)=> setName(e.target.value)}/>
                
                <label htmlFor="phone">Phone</label>
                <input type="text" name='phone' id='phone' value={phone} onChange={(e)=> setPhone(e.target.value)}/>
                
                <label htmlFor="email">Email</label>
                <input type="text" name='email' id='email' value={email} onChange={(e)=> setEmail(e.target.value)}/>
                
                <button onClick={handleSubmit}>Confirm</button>
                <button onClick={props.handleClose}>Cancel</button>
            </div>
        </div>
    )
}

额外优化建议 #

若存在多次编辑不同账号的场景，可给弹窗添加key属性，确保每次打开时组件重新初始化状态，避免旧数据残留：
在SettingsPage调用AccountPopUp时补充key：

<AccountPopUp
    key={account.accountNum}
    id={account.accountNum}
    name={account.accountName}
    phone={account.phoneNum}
    email={account.email}
    handleClose={toggleEditPopup}
/>

内容的提问来源于stack exchange，提问作者Ofir Kadosh