代码之家 › 专栏 › 技术社区 › RamAlx

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

data-conversion reactjs

-1

RamAlx · 技术社区 · 8 年前

我有一个带有html标记的javascript片段,我必须在jsx中调整它以适应react。如何转换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>

2 回复 | 直到 8 年前

1

3

inaumov17 8 年前

为了成功,你应该 反应思考 !

这意味着您应该始终记住,react组件在虚拟dom中起作用,处理表单提交的最可靠方法是将表单作为 反应组分 .

而不是使用 onLoad 您应该使用的事件 lifecycle 与虚拟dom对应的react中的事件。在这个例子中,我使用 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>

2

0

Chase DeAnda 8 年前

不确定如何使用textarea,但下面是一个示例:

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>