Javascript 无法从输入字段的选择框/写入中选择项目。我是否处理“钥匙”错误？

我正在编写一个组件，代码如下所示，渲染后如下所示：

我使用了antd组件来渲染字段。我面临的问题是，我既不能从选择框中选择，也不能在输入字段中写入，如下所示。我有一种感觉，在从getMOCField获得的渲染方法中，我对mocFields不恰当地使用了React的键

这可能是什么原因？我做错了什么？目前，上述组件呈现如下所示：

如果mocFields中的字段数为零，则会呈现一个添加新字段的按钮。 按下按钮后，mocField将填充选择框和输入字段，如上所示。div的键在渲染方法期间确定。

---

似乎侦听器一旦存储在数组中就无法工作。我已经尝试在render函数中内联调用getMOCField，它可以正常工作。以下是我为使其正常工作所做的更改：

class MOC extends Component {
  // ...

  addMOCField(event) {
    event.preventDefault();

    const { mocFields } = this.state;

    // We only keep inside the state an array of number
    // each one of them represent a section of fields.
    const lastFieldId = mocFields[mocFields.length - 1] || 0;
    const nextFieldId = lastFieldId + 1;

    this.setState({
      mocFields: mocFields.concat(nextFieldId),
    });
  }

  removeMOCField(key, event) {
    event.preventDefault();

    this.setState(prevState => ({
      mocFields: prevState.mocFields.filter(field => field !== key)
    }));
  }

  render() {
    const { mocFields } = this.state;
    const mocButton = this.getAddMOCButton();
    const toRender =
      mocFields.length > 0 ? (
        <div className="w-100 p-2 gray-background br-25">
          {/* {mocFields.map((f, index) => (
                <div key={index}>{f}</div>
              ))} */}
          {mocFields.map(fieldIndex => (
            <div key={fieldIndex}>{this.getMOCField(fieldIndex)}</div>
          ))}
          {this.getMOCFieldFooter()}
        </div>
      ) : (
        mocButton
      );

    return toRender;
  }
}

---

你能解释一下我目前的代码吗？getFieldValue中的字段指向什么？每次调用AddMocField时都会呈现两个字段我已经更新了答案：在表单上存储字段不是强制性的。我现在有了一个更接近您已有的实现。我只在render函数中内联了调用getMOCField。它成功了，效果很好。另外，删除字段的正确方法是什么？在MethodRemoveMocField中，我使用了正确索引的拼接，但它总是删除最后一个字段。知道吗？是的，因为我们使用数组的长度来计算字段索引。您可以选择数组的最后一个元素并向其中添加一个元素。然后就有了一个唯一的值。请注意，该表单现在可能包含非连续标识符，例如恢复百分比[1]，恢复百分比[3]。我已经更新以反映这些变化。

class MOC extends Component {
  // ...

  addMOCField(event) {
    event.preventDefault();

    const { mocFields } = this.state;

    // We only keep inside the state an array of number
    // each one of them represent a section of fields.
    const lastFieldId = mocFields[mocFields.length - 1] || 0;
    const nextFieldId = lastFieldId + 1;

    this.setState({
      mocFields: mocFields.concat(nextFieldId),
    });
  }

  removeMOCField(key, event) {
    event.preventDefault();

    this.setState(prevState => ({
      mocFields: prevState.mocFields.filter(field => field !== key)
    }));
  }

  render() {
    const { mocFields } = this.state;
    const mocButton = this.getAddMOCButton();
    const toRender =
      mocFields.length > 0 ? (
        <div className="w-100 p-2 gray-background br-25">
          {/* {mocFields.map((f, index) => (
                <div key={index}>{f}</div>
              ))} */}
          {mocFields.map(fieldIndex => (
            <div key={fieldIndex}>{this.getMOCField(fieldIndex)}</div>
          ))}
          {this.getMOCFieldFooter()}
        </div>
      ) : (
        mocButton
      );

    return toRender;
  }
}