<div>
<label>Last Name</label>
<input
type="text"
name="lastName"
defaultValue={userData.lastName}
onChange={(ev) => this.setState({ lastName: ev.target.value })}
/>
</div>
我在屏幕上有一些输入字段。第一次加载页面时,我显示的是 redux存储区中的只读值。单击“编辑”按钮时,我希望使用现有值。(我的状态对应于表单的每个字段)。DefaultValue来自redux存储。但是onClick
保存了新字段,对于修改过的字段,我只会感到欣慰,其他字段会以空白。有帮助吗?
/* eslint-disable react/destructuring-assignment */
/* eslint-disable react/forbid-prop-types */
/* eslint-disable no-nested-ternary */
import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { eventsActions } from '../../store/actions/index';
class UserAccount extends Component {
//console.log(this.props);
constructor(props) {
console.log('props --- ', props.userData);
super();
this.state = {
username: props.userData.username,
firstName: props.userData.firstName,
lastName: props.userData.lastName,
// profilePic: '',
email: props.userData.email,
addressUnit: props.userData.addressUnit,
addressStreet: props.userData.addressStreet,
addressCity: props.userData.addressCity,
addressZip: props.userData.addressZIP,
addressState: props.userData.addressState,
isEditing: false,
};
this.toggleEdit = this.toggleEdit.bind(this);
}
componentDidMount() {
const { loadUserDetails } = this.props;
loadUserDetails();
}
toggleEdit() {
console.log('toggleEdit is called here ----');
this.setState({ isEditing: !this.state.isEditing });
}
handleChange = (event) => {
console.log('event ---- ', event);
this.setState({ [event.target.name]: event.target.value });
};
updateUser = (e) => {
console.log('updateUser is called ---');
e.preventDefault();
const {
username,
firstName,
lastName,
email,
addressUnit,
addressStreet,
addressCity,
addressZip,
addressState,
} = this.state;
const { editUser } = this.props;
console.log('for updating user --- ', this.state);
editUser(this.state);
};
render() {
const { userData } = this.props;
const {
username,
firstName,
lastName,
email,
addressUnit,
addressStreet,
addressCity,
addressZip,
addressState,
isEditing,
} = this.state;
console.log('userData --- ', userData);
console.log('isEditing ---- ', isEditing);
return (
<div>
{isEditing ? (
<div>
<div>
<label>First Name</label>
<input
type="text"
name="firstName"
// ref={firstName}
value={firstName}
onChange={this.handleChange}
/>
</div>
<div>
<label>Last Name</label>
<input
type="text"
name="lastName"
defaultValue={userData.lastName}
onChange={(ev) => this.setState({ lastName: ev.target.value })}
/>
</div>
<div>
<label>Email</label>
<input
type="text"
name="email"
value={userData.email}
onChange={(ev) => this.setState({ email: ev.target.value })}
/>
</div>
<div>
<label>UserName</label>
<input
type="text"
name="username"
value={userData.username}
onChange={(ev) => this.setState({ username: ev.target.value })}
/>
</div>
<div>
<label>Address Unit</label>
<input
type="text"
name="addressUnit"
value={userData.addressUnit}
onChange={(ev) =>
this.setState({ addressUnit: ev.target.value })
}
/>
</div>
<div>
<label>Address Street</label>
<input
type="text"
name="addressStreet"
value={userData.addressStreet}
onChange={(ev) =>
this.setState({ addressStreet: ev.target.value })
}
/>
</div>
<div>
<label>Address City</label>
<input
type="text"
name="addressCity"
value={userData.addressCity}
onChange={(ev) =>
this.setState({ addressCity: ev.target.value })
}
/>
</div>
<div>
<label>Address State</label>
<input
type="text"
name="addressState"
value={userData.addressState}
onChange={(ev) =>
this.setState({ addressState: ev.target.value })
}
/>
</div>
<div>
<label>Address Zip</label>
<input
type="text"
name="addressZip"
value={userData.addressZIP}
onChange={(ev) =>
this.setState({ addressZip: ev.target.value })
}
/>
</div>
<button type="submit" onClick={this.updateUser}>
Save
</button>
</div>
) : (
<div>
<form>
<div>
<label>First Name:</label>
<label> {userData.firstName}</label>
</div>
<div>
<label>Last Name:</label>
<label> {userData.lastName}</label>
</div>
<div>
<label>Email:</label>
<label> {userData.email}</label>
</div>
<div>
<label>UserName:</label>
<label> {userData.username}</label>
</div>
<div>
<label>Address Unit:</label>
<label> {userData.addressUnit}</label>
</div>
<div>
<label>Address Street:</label>
<label> {userData.addressStreet}</label>
</div>
<div>
<label>Address City:</label>
<label> {userData.addressCity}</label>
</div>
<div>
<label>Address State:</label>
<label> {userData.addressState}</label>
</div>
<div>
<label>Address Zip:</label>
<label> {userData.addressZIP}</label>
</div>
<button type="submit" onClick={this.toggleEdit}>
edit
</button>
</form>
</div>
)}
</div>
);
}
}
const mapStateToProps = (state) => {
console.log('state in UserProfile in mapStatetoProps --- ', state);
return { userData: state.events.user };
};
const mapDispatchToProps = (dispatch) => {
return {
loadUserDetails: (userId) => {
console.log('disptach is called for loadUserDetails --');
dispatch(eventsActions.fetchUserDetails(userId));
},
};
};
UserAccount.propTypes = {
loadUserDetails: PropTypes.func.isRequired,
userData: PropTypes.object.isRequired,
};
export default connect(mapStateToProps, mapDispatchToProps)(UserAccount);
答案 0 :(得分:1)
您可以例如使用redux存储中的值初始化状态。
state = {
lastName: this.props.userData.lastName,
firstName: this.props.userData.lastName,
}; // and so on
然后,即使不进行修改,状态也会存储正确的数据。
注意:请记住将value
道具添加到input
:
<input onChange={} value={this.state.lastName} />
如果您的数据来自异步请求:
componentDidUpdate(prevProps) {
if (!prevProps.userData && this.props.userData){
this.setState({ firstName: this.props.userData.firstName });
}
}