잡아 동적 입력 값에

Question

을이 내 양식보기입니다 반응 :

이 내 동적 입력 폼 코드 :

... 
    let subJudulInput = []; // this variable will render 
    for (var i = 0; i < this.props.subtitleInput.index; i++) { 
    let index = i + 1; 
    subJudulInput.push(
     <div key={'formgroup' + index} class="form-group"> 
      {(i === 0) ? <label for="subJudulInput">Sub Judul</label>:false} 
      <input key={'input' + index} type="text" class="form-control" placeholder={`Masukan Sub Judul ${index}`}/> 
     </div> 
    ); 
    } 
    ... 

내가 더하기 버튼을 클릭하면, 새로운 입력 양식이 표시됩니다 ..

이것은 내 양식 처리기입니다.

onAddingTitle(event) { // if the submit button get pressed 
     let formData = {subJudul:[]}; 
     event.preventDefault(); 

     console.log(event.target.elements); 

    } 

어떻게 그 모든 동적 입력 값을 잡을 수 있습니까? (최선의 방법) to formData 객체. 이 같은 :

let formData = {subJudul:[ 
    'sub judul 1 value here', 
    'sub judul 2 value here', 
    'sub judul 3 value here', 
    'next new input' 
]}; 

Answer 1

추가 name 텍스트 필드에 속성 :

• 양식을 가져 오기 : name={"textbox-"+index}

  이

  onAddingTitle(event) { 
       event.preventDefault(); 
      let formElements = event.target.elements; 
      let formData = { 
       subJudul: [] 
      }; 
      Object.keys(formElements).forEach((key) => { 
       if (formElements[key].type == 'text') { 
       formData.subJudul.push(formElements[key].value) 
       } 
      }); 
      console.log('formData', formData); 
      } 
  

  설명 당신의 기대 값을 얻기 위해 아래 코드를 사용해보십시오 요소 (객체)

• 키를 사용하여 객체 elemets를 통해 반복하십시오.
• 필드의 유형을 확인하십시오 (필요에 따라 추가) 필드의 값을 배열로 밀어 넣으십시오.