反应：添加多个动态字段

Question

我需要动态添加一组5个输入字段。喜欢在图片上。因此，这意味着用户可以添加所需数量的字段。

我为此创建了一个状态，该状态是一个包含对象的数组。请查看示例。

this.state = {
      ugrWordCyr: "",
      ugrWordArb: "",
      rusTranslation: "",
      example: [{ exCyr: "", trRus: "", exLat: "", trEng: "", exArab: "" }],
      origin: "",
      sphere: "",
      see: "",
      lexis: "",
      grammar: "",
      partOfSpeech: "",
      style: "",
      errors: {}
    };

这些是我的表格：

<div className="input-group">
                  {this.state.example.map((example, index) => {
                    return (
                      <div key={index}>
                        <TextFieldGroup
                          placeholder=""
                          info="Введите пример предложения на уйгурском (cyr)"
                          name="exCyr"
                          value={example.exCyr}
                          onChange={e => this.onChangeExamples(e, index)}
                          error={errors.example}
                        />
                        <TextFieldGroup
                          placeholder=""
                          info="Введите перевод примерного предложения на русском"
                          name="trRus"
                          value={example.trRus}
                          onChange={e => this.onChangeExamples(e, index)}
                          error={errors.example}
                        />
                        <TextFieldGroup
                          placeholder=""
                          info="Введите пример предложения на уйгурском (lat)"
                          name="exLat"
                          value={example.exLat}
                          onChange={e => this.onChangeExamples(e, index)}
                          error={errors.example}
                        />
                        <TextFieldGroup
                          placeholder=""
                          info="Введите перевод примерного предложения на Английском"
                          name="trEng"
                          value={example.trEng}
                          onChange={e => this.onChangeExamples(e, index)}
                          error={errors.example}
                        />
                        <TextFieldGroup
                          placeholder=""
                          info="Введите перевод примерного предложения на арабском"
                          name="exArab"
                          value={example.exArab}
                          onChange={e => this.onChangeExamples(e, index)}
                          error={errors.example}
                        />
                        <hr />
                      </div>
                    );
                  })}
                </div>

我使用这些功能来更新两个输入字段并添加新字段

onChangeExamples(e, index) {
    //this.state.example[index].exCyr = e.target.value
    this.state.example[index] = {
      [e.target.name]: e.target.value
    };

    this.setState({ example: this.state.example });
  }

  addTranslations(e) {
    e.preventDefault();

    this.setState({ example: [...this.state.example, ""] });
  }

但是，当我提交console.log时，仅显示最后一个字段。