在反应中获取动态输入值

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 属性：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);
   }

解释：

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

在反应中获取动态输入值

Grab dynamic input value in react

javascript

dom-events

reactjs