reactjs - 如何使用映射处理 formChange

Question

我的作业有问题，我需要编辑该字段，但该字段不可编辑，因为 formData 中的值！== 名称，并且映射成功，但在编辑该字段时，该字段仍然不可编辑。我已经尝试了所有的可能性，但仍然没有为我工作

状态

constructor(props) {
    super(props);

    const token = localStorage.getItem("token");


    let isLogedIn = true
    if (token === null ) {
        isLogedIn = false
    }

        this.state = {
      post : [],
      post2 : [],
      filteredData: [],
      clientId : '',
      value : '',
      formData : {
        userName : '',
        username : '',
        firstName : '',
        middleName : '',
        lastName : '',
        email : '',
        phone : '',
        expiredDate : '',
        activeRoleName : '',
        activeBranchName: ''
      },
      isUpdate : false,
      isLogedIn,
      currentPage: 1,
      todosPerPage: 5,
      isChecked : false,
      isSearch : false,
      modal : false,
      startIndex : 0, 
      endIndex : 5

    }

    this.handleEdit = this.handleEdit.bind(this);
    this.handleClick = this.handleClick.bind(this);

  }

句柄表格

handleForm = (event) => {
    let formDataNew = {...this.state.formData};
    formDataNew[event.target.name] = event.target.defaultValue;
    this.setState ({
      formData : formDataNew,

    })
  }

映射

 {(this.state.post2.map((h,i) => {
                              if ( `${h.username}` === `${this.state.formData.username}`) {

                                return (<FormGroup>
                                        <FormGroup>
                                          <Label htmlFor="middleName">Middle Name</Label>
                                          <Input onChange={this.handleForm} key = {i} defaultValue= {h.middleName}  type="text"  name = "middleName" className="form-control" placeholder="Middle Name" required="" />
                                        </FormGroup>
                                        <FormGroup>
                                          <Label htmlFor="lastName">Last Name</Label>
                                          <Input onChange={this.handleForm} key = {i} defaultValue= {h.lastName}  type="text"  name = "lastName" className="form-control" placeholder="Last Name" required="" />
                                        </FormGroup>
                                        <FormGroup>
                                          <Label htmlFor="email">Email</Label>
                                          <Input onChange={this.handleForm} key = {i} defaultValue= {h.email}  type="text"  name = "email" className="form-control" placeholder="Email" required="" />
                                        </FormGroup>
                                        <FormGroup>
                                          <Label htmlFor="phone">Phone Number</Label>
                                          <Input onChange={this.handleForm} defaultValue={h.phone} type="text"  name = "phone" className="form-control" placeholder="Phone Number" required="" />
                                        </FormGroup>
                                        <FormGroup>
                                          <Label for="expiredDate">Expired Date</Label>
                                              <Input
                                                  type="date"
                                                  name="expiredDate"
                                                  onChange = {this.handleForm}
                                                  defaulValue = {moment(this.state.formData.expiredDate).format("YYYY-MM-DD")}
                                                  placeholder="date placeholder"
                                                  min = {moment().format("YYYY-MM-DD")}/>
                                        </FormGroup>
                                        </FormGroup>
                                        )
                               }} ))} 

post2内部

getPostAPI2 = (data, username) => {
      const token = localStorage.getItem('token');
      const { post } = this.state

      axios.post(`http://53.20.11.10:33/users/get`, { username } ,
        {
          headers:
            {
              "Content-Type" : "application/json",
              "User-Agent" : "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36",
              "AUTHENTICATION-KEY" : token, 
            }
        })
      .then((res)=>{
          let response = res;
          if(response){  

              this.setState  ((prevState) => ({
                post2 : [response.data.response],
                modal: !prevState.modal,
                formData : data,
                formData : {
                    ...data,
                    username :  username

                }


              }));                              
            }

      },this)
      .catch( (error) => {        
        if (error) {
          error.response.data.errors.map(e => {
              alert(e.errorMessage)
              this.setState({
                 formData : {
                   username : ''
                 }
              })
          })
         }
        }
      )
    }

我应该在代码中更改什么才能更改字段？

标签： reactjs