将危险的SetInnerHTML 字符串表单内的formRef 映射到组件内的formRef

Question

I'm having this issue where I need to submit the form provided by the htmlString from I obtain via an api service.

import React from 'react';
import { Button } from 'antd';

class SampleClass extends React.Component {
  constructor() {
    super();
    this.formRef = React.createRef();
  }

  render() {
    // An html form like this is obtained through an api and rendered
    const stringHTML =
      '<form\n' +
      '        ref={this.formRef}\n' + // I want this reference of this form to be mapped to the this.formRef
      '        id="ext-merchant"\n' + // that I've created in the constructor
      '        action="http://localhost:3011/add"\n' +
      '        method="post"\n' +
      '        acceptCharset="UTF-8"\n' +
      '        encType="application/x-www-form-urlencoded"\n' +
      '>\n' +
      '    <input\n' +
      '            type="text"\n' +
      '            id="msisdn"\n' +
      '            name="msisdn"\n' +
      '            value="3454"\n' +
      '    />\n' +
      '    <input\n' +
      '            type="hidden"\n' +
      '            id="amount"\n' +
      '            name="amount"\n' +
      '            value="3454"\n' +
      '    />\n' +
      '    <input type="submit" value="Submit" style="display: none;" />\n' +
      '</form>';

    return (
      <>
        <div dangerouslySetInnerHTML={{ __html: stringHTML }} />
        <Button
          onClick={() => {
            this.formRef.current.submit();
          }}
        >
          Example Button
        </Button>
      </>
    );
  }
}

export default SampleClass;

Some light regarding this issue or some other alternatives would be helpful. If there is a better approach regarding submitting the received form, please suggest it.

Answer 1

我能够通过使用表单 id 访问它并提交它来简单地完成表单提交。

 document.getElementById('ext-merchant-frm').submit();