反应时抓取动态输入值

Question

这是我的表单视图：

这是我的动态输入表单代码：

scalameta

如果我点击加号按钮，新输入表格将显示..

这是我的表单处理程序：

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

我如何抓住所有动态输入值？ （最佳方式）到formData对象。像这样：

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

      console.log(event.target.elements);

   }

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

说明：

• 获取表单元素（对象）
• 使用键
遍历对象元素
• 检查字段的类型，如果是文本框（根据需要添加），请将字段的值推送到数组。