如何在React中动态创建多个元素并获取其对应的值？

Question

我试图创建Inputs并在事件发生时动态选择并监视更改，以便将其保存在DB上。 在结构中，我有

this.state = {
      name: '',
      items: [{ name: '', type: '' }],
    };

在组件中，这就是我创建输入和选择的方式。

{this.state.fields.map((s, idx) => (
              <div key={idx}>
                <Input
                  type="text"
                  placeholder={`${idx + 1}`}
                  value={s.name}
                  onChange={this.handleChange(idx)}
                />
                <Select
                  onChange={this.handleChange(idx)}
                  value={s.type}
                  name="type">
                  <option value="city">
                    City
                  </option>
                  <option value="country">
                    Country
                  </option>
                </Select>
              </div>
            ))}

这是我遇到的问题：

handleChange = idx => evt => {
    const newItems = this.state.items.map((item, sidx) => {
      if (idx !== sidx) return item;
      return { ...item, name: evt.target.value };
    });

    console.log(newItems);
    this.setState({ items: newItems });
  };

输入和选择具有名称值，如何将它们分开？例如，当我选择“国家”时，输入值也将更改为“国家”。它们在价值上表现相同。

我希望能够拥有一个具有2个字段的对象，这些字段与我从“选择”和“输入”中选择的内容相对应。

如果您想知道我如何添加新商品，这里是：

handleAddItem = e => {
    e.preventDefault();
    this.setState({
      items: this.state.items.concat([{ name: '', type: '' }]),
    });
  };

简而言之：我希望能够区分所创建的动态元素，以便可以监视每个元素的值。