抓取動態輸入值的反應

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); 

    } 

我怎麼可以抓住所有的動態輸入值？ （最佳方式）以形成數據對象。像這樣：

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

Answer 1

添加name屬性的文本字段：​​

嘗試下面的代碼，讓您的預期值

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); 
    } 

說明：

• 獲取形式元素（這是一個對象）
• 通過對象元素循環使用鍵
• 檢查字段的類型，如果其文本框（根據需要添加）將該字段的值推送到數組。