在 React Js 中添加值后无法输入输入

Question

我已经尝试使用 react js 使用以下代码

import React, { Component } from 'react';
import Sidebar from './../Sidebar';
import Header from './../Header';
import {get_profile} from './../services/Services';
import $ from 'jquery'; 


export default class Profile extends Component {
  constructor(props) {
    super(props);
    this.state = { userDetails: '' } ; 
  }
  componentWillMount() {
    $(window).scrollTop(0)  
    console.log('sdfds')
    get_profile().then((response) => {  

        var userResults = $.parseJSON(response.text);    
        this.setState({ userDetails: userResults.response });
         console.log(userResults);
    }).catch((error) => {
            //alert(error)
        console.log(error); 

    });
  }
  handleChange(event) {
        console.log(event.target.id)
        this.setState({[event.target.name]: event.target.value});        
 }

  render() {
    return (
    <div className="admin-panel">
        <Sidebar />
        <Header />
        <div className="main-content">
            <div className="contents">
                <div className="container-fluid">
                    <div className="row">
                        <div className="col-sm-6">
                            <h2 className="page-title">Profile</h2>
                            <div className="form-group">
                                <label >First Name</label>
                                <input type="text" id="firstName"  className="form-control" value={this.state.userDetails.firstName}  />
                            </div>
                            <div className="form-group">
                                <label >Last Name</label>
                                <input type="text" id="lastName"  className="form-control" value={this.state.userDetails.lastName} />
                            </div>
                            <div className="form-group">
                                <label >Email</label>
                                <input type="text" id="email" name="email" className="form-control" value={this.state.userDetails.email} />
                            </div>
                            <button type="button" className="btn btn-squared btn-success margin-inline" onClick={(e)=> {this.profileUpdate()}}>Update</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    );
  }
}

获取结果后，我无法编辑输入框值。我尝试过使用 defaultValue ，但这对我也不起作用。我对这个问题感到震惊，请帮助我解决这个问题。

Answer 1

只需将onChange 处理程序传递给输入，它将更新userDetails 的相应键的值，如下所示：

    <input
      ...
      value={this.state.userDetails.firstName}
      onChange={this.onChange}
      />
    onChange(e) {
      this.setState((previousState) => {
        const userDetails = previousState.userDetails
        return { userDetails: {...userDetails, firstName: e.target.value} }
      })
    }

或者你可以像这样写一个通用的onChange函数：

    <input
      ...
      value={this.state.userDetails.firstName}
      onChange={(e) => {this.onChange(e.target.value, 'firstName')}}
      />
    <input
      ...
      value={this.state.userDetails.lastName}
      onChange={(e) => {this.onChange(e.target.value, 'lastName')}}
    />
    <input
      ...
      value={this.state.userDetails.email}
      onChange={(e) => {this.onChange(e.target.value, 'email')}}
    />

    onChange(value, key) {
      this.setState((previousState) => {
        const userDetails = previousState.userDetails
        return { userDetails: {...userDetails, [key]: value} }
      })
    }