如何仅使用React获取选中的单选按钮值？

我一直在寻找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>

来源

2016-12-04 Emma

使用纯JS而不是JSX？你可以发布你的整个组件吗？ –

@JyothiBabuAraja，我还没有看过JSX，它在作业中没有提到，所以我完全错过了它:(尽管我们已经将上面的代码添加到上面的原始文章中 – Emma

通过使用'JSX'你的代码将是现有代码的四分之一 –

这里是工作fiddle

检查这个代码。我认为这可能会解决你的问题。

更新：的findDOMNode与refs可能无法给出准确的radio这是checked。所以我们保持state为component与rating值，它是由功能handleChange()更新，这反过来触发了radio输入的变化。

<!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>

来源

2016-12-04 17:25:15

这就像一个魅力！我非常感谢！虽然我不太了解handleChange函数中发生了什么，你能解释一下吗？如果不是，我完全理解。我会进一步调查自己，谢谢！ – Emma

是的，我解释了最新的答案 –

非常感谢！ – Emma

如何仅使用React获取选中的单选按钮值？

回答

相关问题