Question

我已经在react中创建了具有实时验证的表单，但是我想将此表单发布到PHP页面，以便将其插入数据库中。该代码当前可以验证，但不允许我访问PHP页面，我可以访问配置页面上的SQL数据库，并且运行良好。

反应js形式

<!DOCTYPE html>
<?php 
    include ("includes/header.php");

 ?>
<html lang="en">

<title>Demostration of Forms in React</title>
<script src= "https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src= "https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src= "https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<body>

<h1> Register Page</h1>
<div id="root"></div>

<script type="text/babel">

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    //this.state = {value: 'Write your Name'};

    this.handleChange = this.handleChange.bind(this);
    this.password = this.password.bind(this);
    this.manager = this.manager.bind(this);
    this.phoneChange = this.phoneChange.bind(this);
    this.emailChange = this.emailChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);

  }

  handleChange(event) {
      this.setState({value: event.target.value});
      //this.setState({value: event.target.value.toLowerCase()});
      //perform validation length of the input values or others
      //const textval = this.state.value;
        var textval = this.state.value;
        //if ((textval.length < 5) || (textval.length > 15))
            //alert("Your Character must be 5 to 15 Character");
        //user validation of the special characters
        var iChars = "!@#$%^&*()+=-[]\\\';,./{}|\":<>?";        
        for (var i = 0; i < textval.length; i++) {
            if (iChars.indexOf(textval.charAt(i)) != -1) {
                alert ("Your username should not have !@#$%^&*()+=-[]\\\';,./{}|\":<>? \nThese are not allowed.\n Please remove them and try again.");
                //return false;
            }
        }       

        //if(isNaN(textval))
            //alert(textval);
  }

  phoneChange(event){
  this.setState({phone: event.target.value});
  var textval2 = this.state.phone;
  var iChars2 = "0123456789";
  for(var j = 0; j< textval2.length; j++){
    if(iChars2.indexOf(textval2.charAt(j)) == -1){
      alert("Your phone number should be between 0 and 9");
    }
  }
}

password(event){
  this.setState({password: event.target.value});
}
manager(event){
  this.setState({manager: event.target.value});
}
emailChange(event){
  this.setState({email: event.target.value});
  var emailval = this.state.email;
  var emailCheck= "@.";
  for(var i =0; j<emailval.length; i++){
    if(emailval.indexOf('@')>-1){
        alert("Your email must contain an @");
     }
    }
}
//without .preventDefault() the submitted form would be refreshed
  handleSubmit(event) {

    event.preventDefault();


  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" id="reg_name" value={this.state.value} onChange={this.handleChange} /><br/><br/>
          Email:
          <input type="text" id="reg_email" value={this.state.email} onChange={this.emailChange} /><br/><br/>
          Phone:
          <input type="text" id="reg_phone" value={this.state.phone} onChange={this.phoneChange} /><br/><br/>
          Password:
          <input type="password" name="reg_password" value={this.state.password} onChange={this.password} /><br/><br/>
          Is this an manager account:<br/>
          <input type="checkbox" name="reg_manager" value={this.state.manager} onChange={this.manager}/> <br/><br/>
        </label>
        <br/>
        <input type="submit" value="Submit"   />
      </form>     
    );
  }
}

ReactDOM.render(
  <NameForm />,
  document.getElementById('root')
);

</script>

</body>
</html>

用于插入数据库的PHP页面。

<!DOCTYPE html>
<?php 
    include ("includes/header.php");
    $firstname = $_POST['reg_fname'];
    //$lastname = $_POST['reg_lname'];
    $email = $_POST['reg_email'];
    $phone = $_POST['reg_phone'];
    $password = $_POST['reg_password'];
    //$password2 = $_POST['reg_password2'];
    $manager = $_POST['reg_manager'];

    if ($manager='on') {
        $dbadmin = 1;
    }else{
        $dbadmin = 0;
    }

    $query = "INSERT INTO users(firstname,,email,password,manager) VALUES(?,?,?,?,?)";
    $hashed_password = password_hash($password, PASSWORD_DEFAULT);
    //prepare and bind
    if ($stmt = $dbo->prepare($query)) {
        $stmt->bind_param("sssss", $firstname,$email,$hashed_password,$dbadmin);
        $stmt->execute();
        $stmt->close();
    }

 ?>
 <html>
 <head>
    <title>Registered user</title>
 </head>
 <body>
    <h2>Registered User<?php echo ($firstname) ; ?></h2>

 </body>
 </html>

Answer 1

您可以在套间内使用axios 使用他的帖子并获取功能后... 通过您的API或后端的链接这是一个例子 axios.post（http://localhost: 8800/ data /，{username：username}）。然后（res => { console.log（rec）; //例如print：我从backen获取用户名 }）;

如何将React Submit按钮重定向到PHP页面

1 个答案: