I am trying to show what users checked from a list of activities on my /test.php page. However, I keep only getting Array () 1 to show. I can get another page which inputs texts to show properly but I think I am missing something important with the checkboxes but I can't seem to pinpoint what that is. Any help would be apprecaited
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);
This is test.php code
<head>
</head>
<body>
<?php
echo print_r($_GET);
?>
</body>
</html>
Here is 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>
Aucun commentaire:
Enregistrer un commentaire