Question

我有这个带有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>

Answer 1

为了使其有效，你应该在React中思考！

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

您应该在React中使用也与虚拟DOM对应的onLoad事件，而不是使用lifecycle事件。在该示例中，我使用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>

Answer 2

不确定如何使用textarea，但这是一个让你入门的例子：

＆＃13;

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'));

＆＃13;

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

＆＃13;

将纯javascript脚本转换为react中的类组件

2 个答案: