Question

我希望用户点击“提交”时显示电子邮件。但是我在两个localhost（3000和htdocs）中都遇到了错误。

在localhost 3000内部，单击“提交”后，我被重定向到Inside http://localhost:3000/index.php，并显示错误：Cannot POST /index.php

在htdocs文件夹中的本地主机中，出现一条错误消息：Notice: Undefined index: email in /Applications/XAMPP/xamppfiles/htdocs/project/src/index.php on line 2

我正在尝试将php与react.js正确连接。我在做什么错了，我该如何解决？

这里是App.js：

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
          <form action="index.php" method="POST" encType="multipart/form-data">
              <label>Email: </label><input type="email" name="email"/>
              <input type="submit" value="upload"/>
          </form>
      </div>
    );
  }
}

export default App;

这里是index.php：

<?php
    $email = $_POST['email'];
    echo $email;
?>

Answer 1

如果您需要将输入数据（电子邮件）发送到index.php并进行打印，只需将第二个输入字段修改为一个按钮即可。

<form action="index.php" method="POST" encType="multipart/form-data">
          <label>Email: </label><input type="email" name="email"/>
          <button type="submit" value="upload">Upload</button>
      </form>

Answer 2

constructor{
  this.state = {email: ''}
}

_handleChange(e) {
    this.setState({
      email: e.target.value,
    });
  }

<form action="index.php" method="POST">
  <label>Email: </label>
  <input id="email" type="email" name="email" value={this.state.email} onChange={this._handleChange}/>
</form>

希望这会起作用。我没有php经验，但是您可以通过状态获取电子邮件文本框数据。另外，您可以在表单上提交并调用api或获取数据。

为什么我的reactjs文件无法正确显示用户电子邮件地址？

2 个答案: