时间戳

首页 > 解决方案 > 在反应中将纯javascript脚本转换为类组件

reactjs - 在反应中将纯javascript脚本转换为类组件

问题描述

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

<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>

标签： reactjsdata-conversion

解决方案

为了让它发挥作用，你应该在 React 中思考！

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

onLoad你应该lifecycle在 React 中使用与虚拟 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>

推荐阅读