反应-编辑配置文件-首先显示只读字段，然后单击编辑以使字段可编辑

Question

<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);

Answer 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 });
   }
}