我一直在尋找stackoverflow(和其他地方)的年齡現在,但似乎無法找到任何解決方案,我的問題(或者至少沒有,我明白,可以適用於我的代碼..)。如何僅使用React獲取選中的單選按鈕值?
我們有一個學校的任務,我們只允許使用React。我使用單選按鈕,並希望顯示選中的單選按鈕,但我不明白這應該如何完成。
我會粘貼我的原代碼沒有很多不同的測試,我知道這不起作用,但我不明白我應該添加什麼。使用原始代碼,我只能得到「5」,這是單選按鈕組中的最後一個值,不管我選擇檢查。
謝謝!
//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")
);
}
更新: 既然有人問我貼我的整個代碼,在這裏不言而喻。 正如你所看到的,我正在嘗試用一個學校作業的反應來建立一個酒店數據庫。我還沒有完成所有部分,所以我知道這不僅僅是評級不起作用。我也正在加入一個 「編輯」 功能將帖子:)
<!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>
\t \t <div id="hotelsDB"></div>
\t \t <script>
\t \t \t "use strict";
\t \t \t var HotelEntry = React.createClass({
\t \t \t \t remove: function remove(event) {
\t \t \t \t \t event.preventDefault();
\t \t \t \t \t event.stopPropagation();
\t \t \t \t \t this.props.onUpdate({ remove: true });
\t \t \t \t },
\t \t \t \t render: function render() {
\t \t \t \t \t return React.createElement(
\t \t \t \t \t \t "div", {
\t \t \t \t \t \t \t className: "hotelEntry"
\t \t \t \t \t \t },
\t \t \t \t \t \t React.createElement(
\t \t \t \t \t \t \t "h2", {
\t \t \t \t \t \t \t \t className: "hotelName"
\t \t \t \t \t \t \t },
\t \t \t \t \t \t \t this.props.hotelName
\t \t \t \t \t \t),
\t \t \t \t \t \t React.createElement(
\t \t \t \t \t \t \t "p",{
\t \t \t \t \t \t \t \t className: "rating"
\t \t \t \t \t \t \t },
\t \t \t \t \t \t \t this.props.rating
\t \t \t \t \t \t),
\t \t \t \t \t \t React.createElement(
\t \t \t \t \t \t \t "p", {
\t \t \t \t \t \t \t \t className: "addressLine"
\t \t \t \t \t \t \t },
\t \t \t \t \t \t \t React.createElement(
\t \t \t \t \t \t \t \t "span", {
\t \t \t \t \t \t \t \t \t className: "bold"
\t \t \t \t \t \t \t \t },
\t \t \t \t \t \t \t \t "Address: "
\t \t \t \t \t \t \t),
\t \t \t \t \t \t \t this.props.address \t
\t \t \t \t \t \t),
\t \t \t \t \t \t React.createElement(
\t \t \t \t \t \t \t "p", {
\t \t \t \t \t \t \t \t className: "website bold"
\t \t \t \t \t \t \t },
\t \t \t \t \t \t \t "Website: ",
\t \t \t \t \t \t \t this.props.website && React.createElement(
\t \t \t \t \t \t \t \t "a", {
\t \t \t \t \t \t \t \t \t target: "_blank", href: this.props.website
\t \t \t \t \t \t \t \t },
\t \t \t \t \t \t \t this.props.website)
\t \t \t \t \t \t),
\t \t \t \t \t \t React.createElement(
\t \t \t \t \t \t \t "div", {
\t \t \t \t \t \t \t \t className: "buttons"
\t \t \t \t \t \t \t },
\t \t \t \t \t \t \t React.createElement(
\t \t \t \t \t \t \t \t "a", {
\t \t \t \t \t \t \t \t \t href: true, className: "edit", onClick: this.remove
\t \t \t \t \t \t \t \t } \t
\t \t \t \t \t \t \t),
\t \t \t \t \t \t \t React.createElement(
\t \t \t \t \t \t \t \t "a", {
\t \t \t \t \t \t \t \t \t href: true, className: "remove", onClick: this.remove
\t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t)
\t \t \t \t \t \t)
\t \t \t \t \t);
\t \t \t \t }
\t \t \t });
\t \t \t var Form = React.createClass({
\t \t \t \t handleSubmit: function handleSubmit(event) {
\t \t \t \t \t event.preventDefault();
\t \t \t \t \t var hotelNode = ReactDOM.findDOMNode(this.refs.hotelName);
\t \t \t \t \t var addressNode = ReactDOM.findDOMNode(this.refs.address);
\t \t \t \t \t var websiteNode = ReactDOM.findDOMNode(this.refs.website);
\t \t \t \t \t var ratingNode = ReactDOM.findDOMNode(this.refs.rating);
\t \t \t \t \t if (hotelNode.value != "") {
\t \t \t \t \t \t this.props.onItemAdded({
\t \t \t \t \t \t \t hotelName: hotelNode.value,
\t \t \t \t \t \t \t address: addressNode.value,
\t \t \t \t \t \t \t website: websiteNode.value,
\t \t \t \t \t \t \t rating: ratingNode.value,
\t \t \t \t \t \t });
\t \t \t \t \t \t hotelNode.value = "";
\t \t \t \t \t \t addressNode.value = "";
\t \t \t \t \t \t websiteNode.value = "";
\t \t \t \t \t \t ratingNode.value = "";
\t \t \t \t \t } else {
\t \t \t \t \t \t alert("You must add a hotel name");
\t \t \t \t \t }
\t \t \t \t },
\t \t \t \t render: function render() {
\t \t \t \t \t return React.createElement(
\t \t \t \t \t \t "form", {
\t \t \t \t \t \t \t onSubmit: this.handleSubmit
\t \t \t \t \t \t },
\t \t \t \t \t \t React.createElement(
\t \t \t \t \t \t \t "input", {
\t \t \t \t \t \t \t \t placeholder: "Hotel name", ref: "hotelName"
\t \t \t \t \t \t \t }
\t \t \t \t \t \t),
\t \t \t \t \t \t React.createElement(
\t \t \t \t \t \t \t "input", {
\t \t \t \t \t \t \t \t placeholder: "Address", ref: "address"
\t \t \t \t \t \t \t }
\t \t \t \t \t \t),
\t \t \t \t \t \t React.createElement(
\t \t \t \t \t \t \t "input", {
\t \t \t \t \t \t \t \t type: "url", placeholder: "Website", ref: "website"
\t \t \t \t \t \t \t }
\t \t \t \t \t \t),
\t \t \t \t \t \t React.createElement(
\t \t \t \t \t \t \t "input", {
\t \t \t \t \t \t \t \t className: "rating-input", type: "radio", name: "rate", value: "1", ref: "rating", onChange: this.handleChange
\t \t \t \t \t \t \t }
\t \t \t \t \t \t),
\t \t \t \t \t \t React.createElement(
\t \t \t \t \t \t \t "input", {
\t \t \t \t \t \t \t \t className: "rating-input", type: "radio", name: "rate", value: "2", ref: "rating", onChange: this.handleChange
\t \t \t \t \t \t \t }
\t \t \t \t \t \t),
\t \t \t \t \t \t React.createElement(
\t \t \t \t \t \t \t "input", {
\t \t \t \t \t \t \t \t className: "rating-input", type: "radio", name: "rate", value: "3", ref: "rating", onChange: this.handleChange
\t \t \t \t \t \t \t }
\t \t \t \t \t \t),
\t \t \t \t \t \t React.createElement(
\t \t \t \t \t \t \t "input", {
\t \t \t \t \t \t \t \t className: "rating-input", type: "radio", name: "rate", value: "4", ref: "rating", onChange: this.handleChange
\t \t \t \t \t \t \t }
\t \t \t \t \t \t),
\t \t \t \t \t \t React.createElement(
\t \t \t \t \t \t \t "input", {
\t \t \t \t \t \t \t \t className: "rating-input", type: "radio", name: "rate", value: "5", ref: "rating", onChange: this.handleChange
\t \t \t \t \t \t \t }
\t \t \t \t \t \t),
\t \t \t \t \t \t React.createElement(
\t \t \t \t \t \t \t "button", {
\t \t \t \t \t \t \t \t href: true, id: "add"
\t \t \t \t \t \t \t },
\t \t \t \t \t \t \t "Add hotel"
\t \t \t \t \t \t)
\t \t \t \t \t);
\t \t \t \t }
\t \t \t });
\t \t \t var HotelsHeader = React.createClass({
\t \t \t \t render: function render() {
\t \t \t \t \t return React.createElement(
\t \t \t \t \t \t "h1",
\t \t \t \t \t \t null,
\t \t \t \t \t \t "Hotels"
\t \t \t \t \t);
\t \t \t \t }
\t \t \t });
\t \t \t var HotelsStockholm = React.createClass({
\t \t \t \t showHeader: function showHeader() {
\t \t \t \t \t return React.createElement(HotelsHeader, null);
\t \t \t \t },
\t \t \t \t getInitialState: function getInitialState() {
\t \t \t \t \t return {
\t \t \t \t \t \t items: this.getItemsFromLocalStore()
\t \t \t \t \t };
\t \t \t \t },
\t \t \t \t buildItemNode: function buildItemNode(item, index) {
\t \t \t \t \t return React.createElement(HotelEntry, {
\t \t \t \t \t \t key: index,
\t \t \t \t \t \t hotelName: item.hotelName,
\t \t \t \t \t \t address: item.address,
\t \t \t \t \t \t website: item.website,
\t \t \t \t \t \t rating: item.rating,
\t \t \t \t \t \t onUpdate: this.updateHotelEntry.bind(this, index)
\t \t \t \t \t });
\t \t \t \t },
\t \t \t \t handleNewItem: function handleNewItem(item) {
\t \t \t \t \t var newItems = this.state.items.concat([item]);
\t \t \t \t \t this.setState({ items: newItems });
\t \t \t \t },
\t \t \t \t updateHotelEntry: function updateHotelEntry(index, action) {
\t \t \t \t \t var items = this.state.items;
\t \t \t \t \t if (action.remove) {
\t \t \t \t \t \t items.splice(index, 1);
\t \t \t \t \t }
\t \t \t \t \t this.setState({ items: items });
\t \t \t \t },
\t \t \t \t getItemsFromLocalStore: function getItemsFromLocalStore() {
\t \t \t \t \t if (localStorage.items) {
\t \t \t \t \t \t return JSON.parse(localStorage.items);
\t \t \t \t \t } else {
\t \t \t \t \t \t return [];
\t \t \t \t \t }
\t \t \t \t },
\t \t \t \t componentWillUpdate: function componentWillUpdate(nextProps, nextState) {
\t \t \t \t \t localStorage.items = JSON.stringify(nextState.items);
\t \t \t \t },
\t \t \t \t render: function render() {
\t \t \t \t \t return React.createElement(
\t \t \t \t \t \t 'div',
\t \t \t \t \t \t null,
\t \t \t \t \t \t this.showHeader(),
\t \t \t \t \t \t React.createElement(Form, {
\t \t \t \t \t \t \t onItemAdded: this.handleNewItem
\t \t \t \t \t \t }),
\t \t \t \t \t \t React.createElement(
\t \t \t \t \t \t \t "div", {
\t \t \t \t \t \t \t \t id: "hotels"
\t \t \t \t \t \t \t },
\t \t \t \t \t \t \t this.state.items.map(this.buildItemNode)
\t \t \t \t \t \t)
\t \t \t \t \t);
\t \t \t \t }
\t \t \t });
\t \t \t ReactDOM.render(React.createElement(HotelsStockholm, null), document.getElementById('hotelsDB'));
</script>
</body>
</html>
使用純JS而不是JSX?你可以發佈你的整個組件嗎? –
@JyothiBabuAraja,我還沒有看過JSX,它在作業中沒有提到,所以我完全錯過了它:(儘管我們已經將上面的代碼添加到上面的原始文章中 – Emma
通過使用'JSX'你的代碼將是現有代碼的四分之一 –