抓取动态输入值的反应

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

说明：

• 获取形式元素（这是一个对象）
• 通过对象元素循环使用键
• 检查字段的类型，如果其文本框（根据需要添加）将该字段的值推送到数组。