setState를 사용하여 onChange 이벤트에 대한 개체의 배열을 구성합니다.

Question

동적 속성을 사용하여 양식을 작성하지 못했습니다. 나중에 양식을 정상화 할 수 있지만 또 다른 추가 기능을 수행하지는 말고 onChange 메소드 내에서 수행 할 수 있기 때문에 시도 할 수 있습니다.

// 욕망 출력

formData: { 
    name: 'alice', 
    addresses: [{ 
    address_id: 1, address: 'UK' 
    }, { 
    address_id: 2, address: 'USA' 
    }] 
} 

나는 stucked입니다.

https://codesandbox.io/s/l528yw35x9

Answer 1

문제에 대한 간단한 솔루션은이 같은 주소의 요소를 매핑 할 수 있습니다 의 onChange 방법으로 지금이

this.state = { 
    formData: {addresses:[ 
    { 
     address_id: 1, address: 'UK' 
    }, { 
     address_id: 2, address: 'USA' 
    } 
    ]} 
} 

처럼 폼 데이터의 주소 배열을 초기화하는 것입니다

else{ 
    //{address_id: inputId, address: value} 
    this.setState({ 
    formData: { 
     ...this.state.formData, addresses: 
     this.state.formData.addresses.map(e=>{ 
     return e.address_id == inputId ? 
      { address_id: inputId,address:value} : e 
     }), 

     } 
    }) 
} 

아래의 전체 예제를 참조하십시오. https://codesandbox.io/s/0omj21nrpv