Convert pure javascript script to a class component in react

Question

i'm having this javascript snippet with html tags and i must adjust it in jsx for react. How to convert the onLoadEvent function and the 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>

inaumov17 · Accepted Answer · 2018-06-13 22:26:02Z

3

To make it work, you should think in React!

That means that you should always keep in mind that React components act in the virtual DOM and the most reliable way to handle the form submission is to keep your form in Virtual DOM as a React Component.

Instead of using onLoad event you should use lifecycle events in React that also corresponds to the virtual DOM. In the example, I used componentDidMount to determine the moment when the root component is mounted (loaded) in the virtual 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>

answered Jun 13, 2018 at 22:26

inaumov17

1,33911 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

RamAlx Over a year ago

Great...but how can we handle the onLoad event inside components?

inaumov17 Over a year ago

In React, you should use lifecycle events like componentDidMount, componentWillUnmount, etc to determine when the Component is loaded. The reason is that React Component act in the Virtual DOM, not the Real DOM

Chase DeAnda · Accepted Answer · 2018-06-13 21:59:14Z

0

Not sure how the textarea is being used, but here is an example to get you started:

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>

answered Jun 13, 2018 at 21:59

Chase DeAnda

16.5k3 gold badges34 silver badges41 bronze badges

3 Comments

RamAlx Over a year ago

Nice!!! :) One question...why do you comment out the document.threedfrom.submit();

Chase DeAnda Over a year ago

Because it was causing an error in the test snippet because document.threedform doesn't exist. You should uncomment it in your app.

RamAlx Over a year ago

Because it's mandatory to use this auto submit do you know how can we do it?

Collectives™ on Stack Overflow

Convert pure javascript script to a class component in react

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related