处理组件中动态输入字段的更改

Question

数组值的状态没有改变--我已经尝试过很多次了，但仍然没有成功--有一种方法我错过了，这里是附加的代码，突出了这个问题。如果有人能帮忙的话，我会非常感激的。

类组件处理表单步骤

 constructor(props) {
    super(props);
    this.state = {
      step: 1,
      propertyID:0,
      responseMessage:"",    
      loading:false,
      name:"",
      address: "",
      county:"",
      city: "",
      zipcode: "",
      type: "",
      specifictype: "",
      formValues:[{beds:"",rent:"",numUnits:0,squarefeet:""}]
    };
  }
handleFormChange(i, e) {
    let formValues = this.state.formValues;    
    console.log(formValues);
    formValues[i][e.target.name] = e.target.value;
    this.setState({ formValues });
  }
  render() {
    const { step } = this.state;
    const {
      address,
      name,
      specifictype,
      city,
      county,
      zipcode,
      type,
      formValues,
      responseMessage
    } = this.state;
    const values = {
      address,
      name,
      specifictype,
      city,
      zipcode,
      type,
      county,
      formValues,
      responseMessage
    } ;

    switch (step) {
      
      
      case 3:
        return(
            <PropertyType
                values={values}
                add={this.addFormFields.bind(this)}
                remove = {this.removeFormFields.bind(this)}
                handleChange={this.handleFormChange}
                prevStep={this.prevStep}
                nextStep={this.getandSend}

            />
        )
     
    }
  }

下面是处理动态输入字段的组件的代码。我不得不减少代码--其他部分工作正常--不用担心值、添加、删除、prevStep和下一步--这些都很好--问题是我如何处理更改

function PropertyType({values,add,remove,handleChange,prevStep,nextStep}) {

return(
<>
 <form action="">
                            {values.formValues.slice(0,5).map((element, index) => (
                            <div className="w-full md:w-9/12 flex mx-auto">
                                <div className="mb-6 mr-3">
                                    <label
                                        className="block mb-2 text-coolGray-800"
                                        htmlFor=""
                                    >
                                        Beds
                                    </label>
                                    <select defaultValue={element.beds} onChange={e => handleChange(index, e)} className="block w-full p-3 leading-5 text-coolGray-900 border border-coolGray-200 rounded-lg shadow-md placeholder-coolGray-400 focus:outline-none focus:ring-2 focus:ring-color-main focus:ring-opacity-50 bg-white" aria-label="Default select example">
                                        <option selected>Select bedrooms</option>
                                        <option value="0">Studio</option>
                                        <option value="1">One</option>
                                        <option value="2">Two</option>
                                        <option value="3">Three</option>
                                        <option value="4+">More than 4</option>
                                    </select>
                                </div>
                                <div className="mb-2 mr-3">
                                    <label
                                        className="block mb-2 text-coolGray-800 font-medium"
                                        htmlFor=""
                                    >
                                        Number of units
                                    </label>
                                    <input
                                        defaultValue={element.numUnits}
                                        onChange={e => handleChange(index, e)}
                                        className="appearance-none block w-full p-3 leading-5 text-coolGray-900 border border-coolGray-200 rounded-lg shadow-md placeholder-coolGray-400 focus:outline-none focus:ring-2 focus:ring-color-main focus:ring-opacity-50"
                                        type="number"
                                        placeholder="10"
                                    />
                                </div>
                                <div className="mb-2 mr-3">
                                    <label
                                        className="appearance-none block mb-2 text-coolGray-800 font-medium"
                                        htmlFor=""
                                    >
                                        Squarefeet
                                    </label>
                                    <input
                                        defaultValue={element.squarefeet}
                                        onChange={e => handleChange(index, e)}
                                        className="appearance-none block w-full p-3 leading-5 text-coolGray-900 border border-coolGray-200 rounded-lg shadow-md placeholder-coolGray-400 focus:outline-none focus:ring-2 focus:ring-color-main focus:ring-opacity-50"
                                        type="number"
                                        placeholder="2000"
                                    />
                                </div>
                                <div className="mb-2 mr-3">
                                    <label
                                        className="block mb-2 text-coolGray-800 font-medium"
                                        htmlFor=""
                                    >
                                        Rent
                                    </label>
                                    <input
                                        defaultValue={element.rent}
                                        onChange={e => handleChange(index, e)}
                                        className="appearance-none block w-full p-3 leading-5 text-coolGray-900 border border-coolGray-200 rounded-lg shadow-md placeholder-coolGray-400 focus:outline-none focus:ring-2 focus:ring-color-main focus:ring-opacity-50"
                                        type="number"
                                        placeholder="30,000"
                                    />
                                </div>
                                {
                                    index ?<div className="mb-2 mr-3 mt-8">
                                            <button  className=" inline-block py-3 px-7 mb-4 w-full text-base text-white font-medium text-center leading-6 bg-red-500/50 rounded-md shadow-sm
                                            " onClick={remove}>Remove</button> </div>

                                        : null
                                }

                            </div>
                            ))}

</>

)

}

Answer 1

最终找到了可能需要它的人的答案

class Apps extends React.Component {
  constructor(props) {
    super(props)
    this.state = { 
       formValues: [{ name: "", email : "" }]
     };
    
  }
  handleChange(i, e) {
    let formValues = this.state.formValues;
    formValues[i][e.target.name] = e.target.value;
    this.setState({ formValues });
  }
  render() {
    const {formValues} = this.state;
    return (
        <PropertyType values={formValues}  handleChange={this.handleChange.bind(this)} />
    );
  }
}

以下是属性类型组件

{values.map((element, index) => (
            <div className="form-inline" key={index}>
              <label>Name</label>
              <input type="text" name="name" value={element.name || ""} onChange={e => handleChange(index, e)} />
              <label>Email</label>
              <input type="text" name="email" value={element.email || ""} onChange={e => handleChange(index, e)} />
              {
                index ? 
                  <button type="button"  className="button remove" onClick={() => remove(index)}>Remove</button> 
                : null
              }
            </div>
          ))}

Answer 2

您需要用formValues更新spread operator数组的引用。

handleFormChange(i, e) {
    let formValues = this.state.formValues;    
    console.log(formValues);
    formValues[i][e.target.name] = e.target.value;
    this.setState({ formValues: [...formValues ]});
}

Answer 3

您必须复制一份参考资料，然后按以下方式更新：

handleFormChange = (i, e) => {
        const formValues = [...this.state.formValues]; 
        const res = formValues.map((val,idx)=>{
           if(idx == i){
             return ({...val, [e.target.name]: e.target.value})
           }
           return val
        }) 
        this.setState({ ...this.state, formValues: res});
    }