Не удается получить флажки для отображения в php из формы get - PullRequest
Новая
       22

Не удается получить флажки для отображения в php из формы get

0 голосов
/ 14 апреля 2020 

'use strict';

const e = React.createElement;

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
    this.state={checked: false}

  //this.handleCheckedChange = this.handleCheckedChange.bind(this);
  this.handleSubmit = this.handleSubmit.bind(this);
  this.formContent = this.display1();
  }

  handleSubmit(event) {
    alert('Your information is: ' + JSON.stringify(this.formContent) + " " + "Please Make Sure To Select From One of The Vacation Options and Activities From Below");
  
    event.preventDefault();}

  

  NumberList1(props) {
    let listItems = React.createElement("p", {key: props.id}, props.item.text, React.createElement("input", {
      type: "checkbox",
      value: "1",
      onChange: () => this.setState({checked: true}),
      defaultChecked: false
    }))
    
    return (
      listItems      
    )
  }

  display1(){
      
    let props = [{id: 0, text: "City Tours", completed: false}, 
    {id: 1, text: "Sports", completed: false}, 
    {id: 2, text: "Cycling", completed: false}, 
    {id: 3, text: "Museums", completed: false}, 
    {id: 4, text: "Boating", completed: false}];  
    let listItems = props.map((item) => this.NumberList1({
      key: props.id, 
      item: item})); 

      return(React.createElement("div", {}, listItems));
  }
        

  render() {
   

    //if(this.state.liked == true){
    
      //;}
    
    
      //'button',{ onClick: () => this.setState({ liked: true }) },"New Zealand",

    return (React.createElement("form", {onSubmit: this.handleSubmit, action: 'http://localhost/test.php', method: "get",
    className: "todo-list"
  },"Select Activities From Below", (this.formContent),React.createElement("br", {}), 
  React.createElement("input", {type:"submit", value: "Submit"}), 
  React.createElement("input", {type:"reset", value: "Reset"})))
}

}

 const domContainer = document.getElementById("new");

 ReactDOM.render(
   (e(LikeButton)),
   domContainer);
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset = "utf-8" name = "viewport" content="width= device-width, initial-scale=1"/>
               
        <meta name="travel">
        
        <link rel="stylesheet" type="text/css" href="stylecontact.css">
        <title> Mega Travel</title>      
    </head>
    
    
    <nav class="one">
        <img class="logo" src="images/mega travel logo.png" alt="Mega Travel Logo" style="width:20%"/>
        <hr style="border: 12px solid lightgray;" />


    </nav>
    <nav class="two">
       
        <a class="home" href="#" >Home &nbsp;&nbsp;</a> 
        <a class="about" href="#" > About Us &nbsp;&nbsp; </a>        
        <a class="agent" href="#"> Contact Agent </a>
        
    </nav>   

    <body>
        <!-- Load React. -->
        <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
        <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
        <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js"></script>-->
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>    
        <!-- Load our React component. -->  
      
           
            <div id= "formfind" style="width: max-content;">
                <script src="../src/FormFind.js"></script>
                <table>
                    <tr>
                        <th> Please Check Our Activities For Each Destination:</th>
                    </table>
                    <div>
                        
                        <span id="new">
                            <script src="../src/NewZealand.js"></script>                         
                        </span>     
                      
                        </div>
                                       
                
            </div>     
        
                
           
        
      
    
          
    
      
    </body>

</html>

Я пытаюсь показать, что пользователи проверяли из списка действий на моей странице /test.php. Тем не менее, я продолжаю получать только Array () 1, чтобы показать. Я могу получить еще одну страницу, на которой вводятся тексты для правильного отображения, но я думаю, что упустил что-то важное с флажками, но я не могу точно определить, что это такое. Любая помощь будет приветствоваться 


const e = React.createElement;

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
    this.state={checked: false}

  //this.handleCheckedChange = this.handleCheckedChange.bind(this);
  //this.handleSubmit = this.handleSubmit.bind(this);
  this.formContent = this.display1();
  }



  NumberList1(props) {
    let listItems = React.createElement("p", {key: props.id}, props.item.text, React.createElement("input", {
      type: "checkbox",
      value: "1",
      onChange: () => this.setState({checked: true}),
      defaultChecked: false
    }))

    return (
      listItems      
    )
  }

  display1(){

    let props = [{id: 0, text: "City Tours", completed: false}, 
    {id: 1, text: "Sports", completed: false}, 
    {id: 2, text: "Cycling", completed: false}, 
    {id: 3, text: "Museums", completed: false}, 
    {id: 4, text: "Boating", completed: false}];  
    let listItems = props.map((item) => this.NumberList1({
      key: props.id, 
      item: item})); 

      return(React.createElement("div", {}, listItems));
  }


  render() {


    //if(this.state.liked == true){

      //;}


      //'button',{ onClick: () => this.setState({ liked: true }) },"New Zealand",

    return (React.createElement("form", {action: 'http://localhost/test.php', method: "get",
    className: "todo-list"
  },"Select Activities From Below", (this.formContent),React.createElement("br", {}), 
  React.createElement("input", {type:"submit", value: "Submit"}), 
  React.createElement("input", {type:"reset", value: "Reset"})))
}

}

 const domContainer = document.getElementById("new");

 ReactDOM.render(
   (e(LikeButton)),
   domContainer);

Это тест. php код 

<head> 
</head>
<body>
<?php 
    echo print_r($_GET); 
?>

</body>

</html>

Вот html 

<html lang="en">
    <head>
        <meta charset = "utf-8" name = "viewport" content="width= device-width, initial-scale=1"/>

        <meta name="travel">

        <link rel="stylesheet" type="text/css" href="stylecontact.css">
        <title> Mega Travel</title>      
    </head>


    <body>
        <!-- Load React. -->
        <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
        <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
        <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js"></script>-->
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>    
        <!-- Load our React component. -->  

                <table>
                    <tr>
                        <th> Please Check Our Activities For Each Destination:</th>
                    </table>
                    <div>

                        <span id="new">
                            <script src="../src/NewZealand.js"></script>                         
                        </span>                        


            </div>

    </body>

</html>
...