javascript - react 中handleChange函数的问题

Question

我是 React 新手，我对 handleChange 函数有疑问。

我的程序加载带有 jsonplaceholder 数据的用户列表，并具有“编辑”按钮，单击此按钮将出现一个包含所选用户数据的表单。

问题:当我尝试编辑某些字段时，表单“刷新”。

//User.js (contains the function)



import React from 'react';
import UserEdit from './components/UserEdit';
import UsersList from './components/UsersList'
import './App.css';

class Users extends React.Component {
  constructor(){
    super();
    this.state = {
      users: [],
      displayList: 'block',
      displayForm: 'none',
      edit: false,

      userEdit: {
        id: null,
        name: "",
        email: "",
        address: {
          street: "",
          suite: "",
          city: "",
          zipcode: ""
        },
        phone: ""
      }
    }
    this.handleClick = this.handleClick.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  componentDidMount(){
    this.getUsersList();
  }

  getUsersList(){
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response  => response.json())
      .then(json => this.setState({users: json}));
  }

  getUserEdit(){
    const url = 'https://jsonplaceholder.typicode.com/users/' + this.state.UserEdit.id;

    fetch(url)
      .then(response  => response.json())
      .then(json => this.setState({userEdit: json}));
  }

  handleClick(id){

    if (this.state.displayList === 'block') {
      this.setState({UserEdit: {id: id}});
      this.setState({displayList: 'none', displayForm: 'block'})
      this.setState({edit: true})
    }
    else {
      this.setState({displayList: 'block', displayForm: 'none'})
      this.setState({edit: false})
    }
  }

  handleChange(event){
    this.setState({
      ...this.state,
      [event.target.value]: event.target.value
    }, () => console.log(this.state))
  }

  render(){
    if (this.state.edit === false) {
      return (
        <UsersList
          users = {this.state.users}
          displayList = {this.state.displayList}
          handleClick = {this.handleClick}
        />
      );
    }

    else {
      this.getUserEdit();
      return(
        <UserEdit
          user = {this.state.userEdit}
          displayForm = {this.state.displayForm}
          handleChange = {this.handleChange}
          handleClick = {this.handleClick}
        />
      )
    }
  }
}

export default Users;




//UserEdit.js code

import React from 'react';

function UserEdit(props){
  return(
    <ul>
      <div style={{display: props.displayForm.form}} key={props.user.id}>
        <form>
          <h2>{props.user.name} </h2>
          <p>Email:
            <input
              type="text"
              name="email"
              value = {props.user.email}
              className="form-control"
              onChange={props.handleChange}
            />
          </p>
          <p>Address: </p>
          <ul>
            <li>Street:
              <input
                type="text"
                name="address.street"
                value={props.user.address ? props.user.address.street : ''}
                className="form-control"
                onChange={props.handleChange}
              />
            </li>
            <li>Suite:
              <input
                type="text"
                name="address.suite"
                value={props.user.address ? props.user.address.suite : ''}
                className="form-control"
                onChange={props.handleChange}
              />
            </li>
            <li>City:
              <input
                type="text"
                name="address.city"
                value={props.user.address ? props.user.address.city : ''}
                className="form-control"
                onChange={props.handleChange}
              />
            </li>
            <li>ZipCode:
              <input
                type="text"
                name="address.zipcode"
                value={props.user.address ? props.user.address.zipcode : ''}
                className="form-control"
                onChange={props.handleChange}
              />
            </li>
          </ul>
          <p>Phone:
            <input
              type="text"
              name="phone"
              value = {props.user.phone}
              className="form-control"
              onChange={props.handleChange}
            />
          </p>
        </form>
        <button onClick={() => props.handleClick()}> Save </button>
        <hr></hr>
        </div>
    </ul>
  )
}

我尝试打开控制台看看会发生什么。例如。街道名称为“Kulas Light”，如果我点击数字 5，输入保持不变，但控制台显示“Kulas Light5”

CodeSandBox

Answer 1

更新#1:在问题中提供的codesandbox之后:

Working Solution 。从问题中提供的原始代码中 fork 出来。

• 唯一进行的编辑是在 Users.js 中
• 按照评论了解发生了什么。

远离主要问题:

• 保存功能不完整，因为它似乎实际上没有对数据执行任何 POST

<小时/>

除了克里斯托弗的通知之外，您还需要编辑您所在州的输入的确切值，例如:

如果您正在编辑name属性，那么您需要在处于状态的userEdits中更新它。

  handleChange(event){
    const newUserEdit = {...this.state.userEdit};

    this.setState({
      ...this.state,
      userEdit: {
        ...newUserEdit,
        [event.target.value]: event.target.value
      }
    }, () => console.log(this.state))
  }

只有当您的输入没有这样的名称时，此代码才会真正起作用，例如:address.zipcode address.suite

我对 handleChange 做了一个小编辑，它接受这样的名称并将其转换为可读的 userEdit.address.name:

  handleChange(event){
    const newUserEdit = {...this.state.userEdit};
    const { value, name } = event.target; //get name and value out of event.target
    if(name.indexOf('address.')){
      newUserEdit = {
        ...newUserEdit,
        address: {
          [name.split('.')[1]]: value
        }
      }
    } else {
      newUserEdit = {
        ...newUserEdit,
        [name]: value
      }
    }

    this.setState({
      ...this.state,
      userEdit: { ...newUserEdit }
    }, () => console.log(this.state))
  }