I have been searching stackoverflow (and other places) for ages now, but cannot seem to find any solution to my problem (or at least none that I understand and can apply to my code..).
We have an assignment for school where we are ONLY allowed to use React. I am using radio buttons and want to display the checked radio button, but I don't understand how this should be done.
I will paste my original code without a lot of different tests and I know this doesn't work, but I don't understand what I should add. With the original code I only get "5", which is the last value in the radio button group, whatever I choose to check.
Thank you!
//Displaying value
render: function render() {
return React.createElement(
"div",
{ className: "hotelRating" },
React.createElement(
"p",
{ className: "rating" },
this.props.rating
)
);
}
//Displaying the form
render: function render() {
return React.createElement(
"form",
{ onSubmit: this.handleSubmit },
React.createElement("input", { className: "rating-input", type: "radio", name: "rate", value: "1", ref: "rating" }),
React.createElement("input", { className: "rating-input", type: "radio", name: "rate", value: "2", ref: "rating" }),
React.createElement("input", { className: "rating-input", type: "radio", name: "rate", value: "3", ref: "rating" }),
React.createElement("input", { className: "rating-input", type: "radio", name: "rate", value: "4", ref: "rating" }),
React.createElement("input", { className: "rating-input", type: "radio", name: "rate", value: "5", ref: "rating" }),
React.createElement("button",{ href: true, id: "add" }, "Add rating")
);
}Update: Since I was asked to paste my entire code, here it goes. As you can see I'm trying to build a hotel database using react for a school assignment. I'm not done with all parts yet, so I know that it's not only the rating that's not working. I'm also working on adding an "edit" function to the posts :)
<!doctype html>
<html>
<head>
<title>Assignment 5</title>
<meta charset="utf-8">
<script src="js/react.min.js"></script>
<script src="js/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div id="hotelsDB"></div>
<script>
"use strict";
var HotelEntry = React.createClass({
remove: function remove(event) {
event.preventDefault();
event.stopPropagation();
this.props.onUpdate({ remove: true });
},
render: function render() {
return React.createElement(
"div", {
className: "hotelEntry"
},
React.createElement(
"h2", {
className: "hotelName"
},
this.props.hotelName
),
React.createElement(
"p",{
className: "rating"
},
this.props.rating
),
React.createElement(
"p", {
className: "addressLine"
},
React.createElement(
"span", {
className: "bold"
},
"Address: "
),
this.props.address
),
React.createElement(
"p", {
className: "website bold"
},
"Website: ",
this.props.website && React.createElement(
"a", {
target: "_blank", href: this.props.website
},
this.props.website)
),
React.createElement(
"div", {
className: "buttons"
},
React.createElement(
"a", {
href: true, className: "edit", onClick: this.remove
}
),
React.createElement(
"a", {
href: true, className: "remove", onClick: this.remove
}
)
)
);
}
});
var Form = React.createClass({
handleSubmit: function handleSubmit(event) {
event.preventDefault();
var hotelNode = ReactDOM.findDOMNode(this.refs.hotelName);
var addressNode = ReactDOM.findDOMNode(this.refs.address);
var websiteNode = ReactDOM.findDOMNode(this.refs.website);
var ratingNode = ReactDOM.findDOMNode(this.refs.rating);
if (hotelNode.value != "") {
this.props.onItemAdded({
hotelName: hotelNode.value,
address: addressNode.value,
website: websiteNode.value,
rating: ratingNode.value,
});
hotelNode.value = "";
addressNode.value = "";
websiteNode.value = "";
ratingNode.value = "";
} else {
alert("You must add a hotel name");
}
},
render: function render() {
return React.createElement(
"form", {
onSubmit: this.handleSubmit
},
React.createElement(
"input", {
placeholder: "Hotel name", ref: "hotelName"
}
),
React.createElement(
"input", {
placeholder: "Address", ref: "address"
}
),
React.createElement(
"input", {
type: "url", placeholder: "Website", ref: "website"
}
),
React.createElement(
"input", {
className: "rating-input", type: "radio", name: "rate", value: "1", ref: "rating", onChange: this.handleChange
}
),
React.createElement(
"input", {
className: "rating-input", type: "radio", name: "rate", value: "2", ref: "rating", onChange: this.handleChange
}
),
React.createElement(
"input", {
className: "rating-input", type: "radio", name: "rate", value: "3", ref: "rating", onChange: this.handleChange
}
),
React.createElement(
"input", {
className: "rating-input", type: "radio", name: "rate", value: "4", ref: "rating", onChange: this.handleChange
}
),
React.createElement(
"input", {
className: "rating-input", type: "radio", name: "rate", value: "5", ref: "rating", onChange: this.handleChange
}
),
React.createElement(
"button", {
href: true, id: "add"
},
"Add hotel"
)
);
}
});
var HotelsHeader = React.createClass({
render: function render() {
return React.createElement(
"h1",
null,
"Hotels"
);
}
});
var HotelsStockholm = React.createClass({
showHeader: function showHeader() {
return React.createElement(HotelsHeader, null);
},
getInitialState: function getInitialState() {
return {
items: this.getItemsFromLocalStore()
};
},
buildItemNode: function buildItemNode(item, index) {
return React.createElement(HotelEntry, {
key: index,
hotelName: item.hotelName,
address: item.address,
website: item.website,
rating: item.rating,
onUpdate: this.updateHotelEntry.bind(this, index)
});
},
handleNewItem: function handleNewItem(item) {
var newItems = this.state.items.concat([item]);
this.setState({ items: newItems });
},
updateHotelEntry: function updateHotelEntry(index, action) {
var items = this.state.items;
if (action.remove) {
items.splice(index, 1);
}
this.setState({ items: items });
},
getItemsFromLocalStore: function getItemsFromLocalStore() {
if (localStorage.items) {
return JSON.parse(localStorage.items);
} else {
return [];
}
},
componentWillUpdate: function componentWillUpdate(nextProps, nextState) {
localStorage.items = JSON.stringify(nextState.items);
},
render: function render() {
return React.createElement(
'div',
null,
this.showHeader(),
React.createElement(Form, {
onItemAdded: this.handleNewItem
}),
React.createElement(
"div", {
id: "hotels"
},
this.state.items.map(this.buildItemNode)
)
);
}
});
ReactDOM.render(React.createElement(HotelsStockholm, null), document.getElementById('hotelsDB'));
</script>
</body>
</html>Here is the working fiddle
Check this code. I think this might solve your problem.
Update: The findDOMNode with refs may not give the accurate radio which is checked. So we are maintaining a state for component with rating value which is updated by function handleChange(), which in turn triggered for change in radio input.
<!doctype html>
<html>
<head>
<title>Assignment 5</title>
<meta charset="utf-8">
<script src="js/react.min.js"></script>
<script src="js/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div id="hotelsDB"></div>
<script>
"use strict";
var HotelEntry = React.createClass({
remove: function remove(event) {
event.preventDefault();
event.stopPropagation();
this.props.onUpdate({ remove: true });
},
render: function render() {
return React.createElement(
"div", {
className: "hotelEntry"
},
React.createElement(
"h2", {
className: "hotelName"
},
this.props.hotelName
),
React.createElement(
"p",{
className: "rating"
},
this.props.rating
),
React.createElement(
"p", {
className: "addressLine"
},
React.createElement(
"span", {
className: "bold"
},
"Address: "
),
this.props.address
),
React.createElement(
"p", {
className: "website bold"
},
"Website: ",
this.props.website && React.createElement(
"a", {
target: "_blank", href: this.props.website
},
this.props.website)
),
React.createElement(
"div", {
className: "buttons"
},
React.createElement(
"a", {
href: true, className: "edit", onClick: this.remove
}
),
React.createElement(
"a", {
href: true, className: "remove", onClick: this.remove
}
)
)
);
}
});
var Form = React.createClass({
getInitialState: function(){
return {
rating: 1
};
},
handleSubmit: function (event) {
event.preventDefault();
var hotelNode = ReactDOM.findDOMNode(this.refs.hotelName);
var addressNode = ReactDOM.findDOMNode(this.refs.address);
var websiteNode = ReactDOM.findDOMNode(this.refs.website);
var ratingNode = ReactDOM.findDOMNode(this.refs.rating);
if (hotelNode.value != "") {
this.props.onItemAdded({
hotelName: hotelNode.value,
address: addressNode.value,
website: websiteNode.value,
rating: this.state.rating//ratingNode.value,
});
hotelNode.value = "";
addressNode.value = "";
websiteNode.value = "";
ratingNode.value = "";
} else {
alert("You must add a hotel name");
}
},
handleChange: function(event){
var currentRating = event.target.value.trim();
this.setState({
rating: currentRating
});
},
render: function render() {
return React.createElement(
"form", {
onSubmit: this.handleSubmit
},
React.createElement(
"input", {
placeholder: "Hotel name", ref: "hotelName"
}
),
React.createElement(
"input", {
placeholder: "Address", ref: "address"
}
),
React.createElement(
"input", {
type: "url", placeholder: "Website", ref: "website"
}
),
React.createElement(
"input", {
className: "rating-input", type: "radio", name: "rate", value: "1", ref: "rating", onChange: this.handleChange
}
),
React.createElement(
"input", {
className: "rating-input", type: "radio", name: "rate", value: "2", ref: "rating", onChange: this.handleChange
}
),
React.createElement(
"input", {
className: "rating-input", type: "radio", name: "rate", value: "3", ref: "rating", onChange: this.handleChange
}
),
React.createElement(
"input", {
className: "rating-input", type: "radio", name: "rate", value: "4", ref: "rating", onChange: this.handleChange
}
),
React.createElement(
"input", {
className: "rating-input", type: "radio", name: "rate", value: "5", ref: "rating", onChange: this.handleChange
}
),
React.createElement(
"button", {
href: true, id: "add"
},
"Add hotel"
)
);
}
});
var HotelsHeader = React.createClass({
render: function render() {
return React.createElement(
"h1",
null,
"Hotels"
);
}
});
var HotelsStockholm = React.createClass({
showHeader: function showHeader() {
return React.createElement(HotelsHeader, null);
},
getInitialState: function getInitialState() {
return {
items: this.getItemsFromLocalStore()
};
},
buildItemNode: function buildItemNode(item, index) {
return React.createElement(HotelEntry, {
key: index,
hotelName: item.hotelName,
address: item.address,
website: item.website,
rating: item.rating,
onUpdate: this.updateHotelEntry.bind(this, index)
});
},
handleNewItem: function handleNewItem(item) {
var newItems = this.state.items.concat([item]);
this.setState({ items: newItems });
},
updateHotelEntry: function updateHotelEntry(index, action) {
var items = this.state.items;
if (action.remove) {
items.splice(index, 1);
}
this.setState({ items: items });
},
getItemsFromLocalStore: function getItemsFromLocalStore() {
if (localStorage.items) {
return JSON.parse(localStorage.items);
} else {
return [];
}
},
componentWillUpdate: function componentWillUpdate(nextProps, nextState) {
localStorage.items = JSON.stringify(nextState.items);
},
render: function render() {
return React.createElement(
'div',
null,
this.showHeader(),
React.createElement(Form, {
onItemAdded: this.handleNewItem
}),
React.createElement(
"div", {
id: "hotels"
},
this.state.items.map(this.buildItemNode)
)
);
}
});
ReactDOM.render(React.createElement(HotelsStockholm, null), document.getElementById('hotelsDB'));
</script>
</body>
</html>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments