在单击按钮时向表单动态添加2个字段

Question

我的目标是每次单击按钮时添加2个字段。该按钮的onClick正在运行addNewExclusion函数，该函数应该附加一个div元素并将新的FieldTextInputs添加到其中。

我认为有一种方法可以使此工作正常进行，但可能是一种更好的方法来完全解决该问题。欢迎任何建议！

  var exclusionsCount = 1;

  var exclusionZipCode = function(count) {
    const fields = [];
    for (var i = count - 1; i >= 0; i--) {
      const identifierZipCode = "exclusionZipCode" + i
      const identifierRadius = "exclusionRadius" + i
      const field = (
        <React.Fragment>
          <FieldTextInput
            className={css.exclusionZipCode}
            type="text"
            name={identifierZipCode}
            id={identifierZipCode}
            label={exclusionZipCodeMessage}
            placeholder={exclusionZipCodePlaceholderMessage}
          />
          <FieldTextInput
            className={css.exclusionRadius}
            type="text"
            name={identifierRadius}
            id={identifierRadius}
            label={exclusionRadiusMessage}
            placeholder={exclusionRadiusPlaceholderMessage}
          />
        </React.Fragment>
      )
      fields.push(field);
    }
    return(
      fields
    )
  }

  const addNewExclusion = function() {
    var divStuff = document.getElementById('exclusionElements');
    divStuff.append(exclusionZipCode(exclusionsCount))
    exclusionsCount += 1;
  }