[英]React redux — input field not letting me type
所以我有 3 个输入字段,一个用于姓名、电子邮件和密码。 电子邮件和密码输入字段工作正常,但名称输入字段不允许我输入任何内容。 我将输入字段的值设置为来自用户,因此它会自动填充字段。 这是我的代码
import React, {useState, useEffect} from 'react';
import {useParams} from 'react-router-dom';
import {connect} from 'react-redux';
import {editUserData, fetchUserData, deleteProfile} from '../actions/index';
const EditUser = props => {
const [user, setUser] = useState({name: '', email: '', password: ''})
const params = useParams();
const editUser = e => {
e.preventDefault();
props.editUserData(params, user);
}
const handleChanges = e => {
e.persist();
setUser({...user, [e.target.name]: e.target.value});
}
useEffect(() => {
props.fetchUserData(params, setUser);
}, [])
const deleteOnClick = () => {
props.deleteProfile(params)
}
return (
<>
<form className='editUserForm' onSubmit={editUser}>
<h3>Edit Profile !</h3>
<div>Name</div>
<input className='editInput' type='text' name='name' value={`${user.firstName} ${user.lastName}`} onChange={handleChanges} />
<div>Email</div>
<input className='editInput' type='text' name='email' value={user.email} onChange={handleChanges} />
<div>Password</div>
<input className='editInput' type='text' name='password' value={user.password} onChange={handleChanges} />
<button className='submitButton'>Submit</button>
</form>
<div className='deleteProfile'>
<button className='deleteProfileButton' onClick={deleteOnClick}>Delete Profile</button>
</div>
</>
)
}
const mapStateToProps = state => {
return {
users: [],
user: {},
registerSuccessMessage: '',
user_stories: {},
isLoading: false,
error: null
}
}
export default connect(mapStateToProps, {editUserData, fetchUserData, deleteProfile})(EditUser);
编辑(根据@Boussadjra 的建议)
这就是 props.fetchUserData 之后的状态。 -- setUser 在哪里 -- 这就是为什么我有输入值 ${user.firstName} ${user.lastName}
user.firstName
和user.lastName
未定义,它们在您的user
状态中未定义为属性,因此您应该简单地使用firstName
和lastName
属性作为 value :
value={ us}
或定义您的状态如下:
const [user, setUser] = useState({firstName:'',lastName:'', email: '', password: ''})
我们假设名字和姓氏用空格分隔,所以当你来更新状态时,拆分那个名字:
const handleChanges = e => {
e.persist();
if(e.target.name==='name'){
let name=e.target.value.split(' ')
setUser({...user, firstName:name[0],lastName:name[1]});
}else{
setUser({...user, [e.target.name]: e.target.value});
}
}
那是因为您将 "name" input
的value
为${user.firstName} ${user.lastName}
,这是undefined
。 您可以将您的user
状态设置为最初具有这些属性,但我建议对firstName
、 lastName
、 email
和password
每一个使用单独的useState()
(因为在单个input
组合名字和姓氏很容易出错,如评论中所述):
import React, {useState, useEffect} from 'react'; import {useParams} from 'react-router-dom'; import {connect} from 'react-redux'; import {editUserData, fetchUserData, deleteProfile} from '../actions/index'; const EditUser = props => { const [firstName, setFirstName] = useState(''); const [lastName, setLastName] = useState(''); const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const params = useParams(); const editUser = e => { e.preventDefault(); props.editUserData(params, user); } useEffect(() => { props.fetchUserData(params, setUser); }, []) const deleteOnClick = () => { props.deleteProfile(params) } return ( <> <form className='editUserForm' onSubmit={editUser}> <h3>Edit Profile !</h3> <div>First Name</div> <input className='editInput' type='text' name='firstName' value={firstName} onChange={e => setFirstName(e.target.value)} /> <div>Last Name</div> <input className='editInput' type='text' name='lastName' value={lastName} onChange={e => setLastName(e.target.value)} /> <div>Email</div> <input className='editInput' type='text' name='email' value={email} onChange={e => setEmail(e.target.value)} /> <div>Password</div> <input className='editInput' type='text' name='password' value={password} onChange={e => setPassword(e.target.value)} /> <button className='submitButton'>Submit</button> </form> <div className='deleteProfile'> <button className='deleteProfileButton' onClick={deleteOnClick}>Delete Profile</button> </div> </> ) } const mapStateToProps = state => { return { users: [], user: {}, registerSuccessMessage: '', user_stories: {}, isLoading: false, error: null } } export default connect(mapStateToProps, {editUserData, fetchUserData, deleteProfile})(EditUser);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.