在 React 中将纯 javascript 脚本转换为 class 组件

Question

我有这个带有 html 标签的 javascript 片段，我必须在 jsx 中调整它以做出反应。如何转换onLoadEvent函数和form

<html> 
<head> 
<title>Title</title> 
<script language="Javascript" > 
function OnLoadEvent(){ 
document.threedfrom.submit(); 
}
</script>
</head> 
<body OnLoad="OnLoadEvent();" > 
<form name="123123" action="url" method="POST"> 
<textarea style="display: none"name="PaReq"> 
</textarea>
<input type="hidden" name="ew" value="1">Hlleo
<input type="hidden" name="MD" value="testtest"> 
<noscript>
  <p align="center" class="main">Testing</p>
  <p align="center" class="main"><input type="submit" value="Submit" /></p>
</noscript>
</form> 
</body> 
</html>

Answer 1

不确定文本区域是如何使用的，但这里有一个帮助您入门的示例：

class App extends React.Component {

  state = {
    termUrl: 'http://www.url.gr/return.php',
    md: "NBGTEST000000412"
  };

  componentDidMount() {
    //document.threedfrom.submit(); 
  }
  
  handleSubmit = () => {
    // Make api call using your preferred package
    axios({
      url: 'https://accreditation.datacash.com/acs-nbgs2a_i',
      method: 'POST',
      data: this.state
    });
  }
  
  render () {
    return (
      <div>
        <textarea style={{display: "none"}} name="PaReq" />
        <p align="center" class="main">Testing</p>
        <p align="center" class="main"><button onClick={this.handleSubmit}>Submit</button></p>
      </div>
    )
  }
}

ReactDOM.render(<App/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 2

要使其工作，您应该考虑 React！

这意味着您应该始终牢记 React 组件在虚拟 DOM 中运行，处理表单提交的最可靠方法是将您的表单保存在虚拟 DOM 中作为React 组件.

你应该在 React 中使用 lifecycle 事件而不是使用 onLoad 事件，它也对应于虚拟 DOM。在示例中，我使用 componentDidMount 来确定根组件在虚拟 DOM.

中挂载（加载）的时刻

class Form extends React.Component {

  state = {
    termUrl: 'http://www.url.gr/return.php',
    md: 'NBGTEST000000412',
  }
  
  componentDidMount() {
    this.props.onSubmit({
      termUrl: this.state.termUrl,
      md: this.state.md,
    });
  }

  handleSubmit = (e) => {
    e.preventDefault();
    
    this.props.onSubmit({
      termUrl: this.state.termUrl,
      md: this.state.md,
    });
  }

  render() {
    return (
      <form
        name="threedfrom"
        onSubmit={this.handleSubmit}
      >
        <h3>Form</h3>
        <textarea style={{ display: 'none' }} name="PaReq"></textarea>
        <span>*Mετά τον ACS για το capture του PARes</span>
        <input
          type="hidden"
          name="TermUrl"
          value={this.state.termUrl}
        />
        <input
          type="hidden"
          name="MD"
          value={this.state.md}
        />
      </form>
    );
  }
 
}


class App extends React.Component {

  submit = (values) => {
    console.log('Submitting', values);
    const url = 'https://accreditation.datacash.com/acs-nbgs2a_i';
    fetch(url, {
      method: 'post',
      headers: {
        'Content-Type': 'application/json'
      },
      body: values,
    })
    .then((resp) => { console.log('Got response', resp); })
    .catch((err) => { console.error('Got error', err); })
  }

  render() {
    return (
     <div>
        <h2>React App</h2>
        <Form onSubmit={this.submit} />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('react'));

<html> 
<head> 
<title>Example</title> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

</head> 
<body>
<div id="react"></div> 

</body>
</html>

在 React 中将纯 javascript 脚本转换为 class 组件

Convert pure javascript script to a class component in react

data-conversion

reactjs