提交动态创建的表单/反应

如何解决提交动态创建的表单/反应

我正在使用 React 开发一个 dApp，合同有一些数据，我已经使用地图创建了 5 个（将会更多）表单。我想弄清楚如何分别发送它们。

<div className="col-lg-12 row">
  {this.props.documentos.map((documento,key) => {
    return (
      <form
        key={key}
        onSubmit={(event) => {
          event.preventDefault();
          const idDocumento = this.idDocumento;
          const destinatario = this.txtAddressDestinatario.value;
          const precio = this.txtPrecioAcordado.value;

          console.log(idDocumento);
          console.log(destinatario);
          console.log(precio);
        }}
      >
        <div className="card border-primary mb-3 mx-2">
          <div
            className="card-header bg-primary text-white"
            ref={(this.idDocumento = documento.id)}
          >
            {documento.id} # {documento.nombre}
          </div>
          <div className="card-body text-primary">
            <h5 className="card-title">
              Precio realización trámite {documento.precio} ETH{" "}
            </h5>
            <p>
              <input
                id="txtAddressDestinatario"
                type="text"
                ref={(input) => {
                  this.txtAddressDestinatario = input;
                }}
                className="form-control"
                placeholder="Dirección Destinatario"
                required
              />
            </p>
            <p>
              <input
                id="txtPrecioAcordado"
                type="text"
                ref={(input) => {
                  this.txtPrecioAcordado = input;
                }}
                className="form-control"
                placeholder="Monto"
                required
              />
            </p>
          </div>
          <div className="card-footer bg-transparent border-primary d-flex justify-content-center">
            <button className="btn btn-warning mx-2">
              Habilitar Documento
            </button>
            <button className="btn btn-primary mx-2" type="submit">
              Generar Documento
            </button>
          </div>
        </div>
      </form>
    );
  })}
</div>;

控制台中出现的是id 5和5th Form（最后一个）的值。所以无论你输入哪种形式，它只需要从最后一个创建的值中获取值。

Image of Forms

我已经尝试了很多方法来让它发挥作用。这也是我第一个使用 React 的“大”项目。感谢任何建议。

谢谢