获取选中的单选按钮的值

我试图在窗体中为三个互斥选项设置三个单选按钮。该表单还包含一个文本输入和textarea。点击提交按钮后，选中的单选按钮的值以及文本输入和文本区域的值需要分配为道具的值。获取选中的单选按钮的值

var Widget = React.createClass({ 
    render: function() { 

    var widgetClasses = classNames('widget', this.props.widgetWidth); 
    return (
     <div className={widgetClasses}> 
     <header className="widget-header"> 
      <h3>{this.props.widgetTitle}</h3> 
      <p>{this.props.widgetDescription}</p> 
     </header> 
     <ul> 
      <li>Lorem ipsum</li> 
     </ul> 
     <ul> 
      <li>Dolor sit</li> 
     </ul> 
     </div> 
    ) 
    } 
}); 

var WidgetsContainer = React.createClass({ 
    render: function() { 
    var widgetNodes = this.props.data.map(function(widget) { 
     return (
     <Widget widgetTitle={widget.widgetTitle} 
       widgetWidth={widget.widgetWidth} 
       widgetDescription={widget.widgetDescription}> 
     </Widget> 
    ); 
    }); 
    return (
     <div className="widgetsContainer"> 
     {widgetNodes} 
     </div> 
    ); 
    } 

}) 

var Dashboard = React.createClass({ 
    getInitialState: function() { 
    return {data: []} 
    }, 
    handleWidgetConfig: function(widget) { 
    var widgets = this.state.data; 
    // var widget.id = Date.now(); 
    var newWidgets = widgets.concat([widget]); 
    this.setState({data: newWidgets}); 
    }, 
    render: function() { 
    var displayedItems = this.state.data; 
    return (
     <div className="dashboard-content"> 
     <CreateWidgetDropdown updateWidgetConfig={this.handleWidgetConfig} /> 
     <WidgetsContainer data={displayedItems} /> 
     </div> 
    ); 
    } 
}); 

var CreateWidgetDropdown = React.createClass({ 
    createNewWidget: function(e) { 
     e.preventDefault(); 

     var widgetWidth = this.refs.widgetWidthInput.checked.value; 
     var widgetTitle = this.refs.widgetTitleInput.value; 
     var widgetDescription = this.refs.widgetDescriptionInput.value; 

     this.props.updateWidgetConfig({ 
     widgetWidth: widgetWidth, 
     widgetTitle: widgetTitle, 
     widgetDescription: widgetDescription 
     }); 
    }, 
    render: function() { 
     return (
      <div className="page-dropdown"> 
      <div className="page-dropdown-header"> 
       <h2 className="wrapper">Add a Widget</h2> 
      </div> 
      <div id="page-dropdown-content"> 
       <form className="page-dropdown-form"> 
       <div classNameName="choose-widget-type"> 
        <h3>Choose a Widget Type</h3> 
        <div className="widget-type table"> 
        <h4>Table</h4> 
        <div classNameName="widget-type-icon"> 
         <img src="" alt="" /> 
        </div> 
        <ul className="widgetWidth"> 
         <li> 
         <label for="1/3 Width input"> 
          1/3 Width 
          <input ref="widgetWidthInput" name="widgetWidth" type="checkbox" value="1/3 Width" /> 
         </label>   
         </li> 
        <li> 
         <label for="2/3 Width input"> 
          2/3 Width 
          <input ref="widgetWidthInput" name="widgetWidth" type="checkbox" value="2/3 Width" /> 
         </label>   
         </li> 
         <li> 
         <label for="Full Width input"> 
          Full Width 
          <input ref="widgetWidthInput" name="widgetWidth" type="checkbox" value="Full Width" /> 
         </label>   
         </li> 
        </ul> 
        </div> 


       <div classNameName="create-widget-header"> 
        <h3>Widget Header (Optional)</h3> 
        <label for="widget-title-input"> 
         Widget Title (30 characters max) 
         <input type="text" ref="widgetTitleInput" required /> 
        </label> 
        <label for="widget-description-input"> 
         Widget Description (50 characters max) 
         <textarea ref="widgetDescriptionInput"></textarea> 
        </label> 
        <button onClick={this.createNewWidget}>Add Widget</button> 
        <button type="reset">Cancel</button> 
       </div> 
       </form> 
      </div> 
      </div> 
     ) 
    } 
}); 


ReactDOM.render(<Dashboard />, document.getElementById('dashboard-container'));

来源

2016-07-07 Jaeeun Lee

我会建议你使用的<input type="checkbox"><input type="radio">代替：

<ul className="widgetWidth"> 
    <li> 
    <label> 
     1/3 Width 
     {' '} 
     <input name="width" type="radio" value="1/3 Width" defaultChecked/> 
    </label> 
    </li> 
<li> 
    <label> 
     2/3 Width 
     {' '} 
     <input name="width" type="radio" value="2/3 Width" /> 
    </label> 
    </li> 
    <li> 
    <label> 
     Full Width 
     {' '} 
     <input name="width" type="radio" value="Full Width" /> 
    </label> 
    </li> 
</ul>

然后，如果你使用表单的onsubmit事件......

<form className="page-dropdown-form" onSubmit={this.createNewWidget}>

...，并给所有的输入name属性，您可以使用form's elements collection以refs获取所需的所有值，并且无线电输入的值可以是o

createNewWidget(e) { 
    e.preventDefault() 

    var form = e.target 

    var width = form.elements.width.value 
    var title = form.elements.title.value 
    var description = form.elements.description.value 

    this.props.updateWidgetConfig({ 
    width, 
    title, 
    description, 
    }) 
},

活生生的例子：使用在collection it's represented by在form.elements的.value吸气btained http://stackoverflow-38236634.surge.sh/

要点可以克隆开发（用热重装），并建立这个例子：https://gist.github.com/insin/45b7f66e01628601c0cc6b79767b0e4f

工作示例的完整代码：

var classNames = require('classnames') 
var React = require('react') 
var ReactDOM = require('react-dom') 
var uuid = require('uuid') 

var Widget = React.createClass({ 
    render() { 
    var {widget} = this.props 
    var widgetClasses = classNames('widget', widget.width) 
    return <div className={widgetClasses}> 
     <header className="widget-header"> 
     <h3>{widget.title}</h3> 
     <p>{widget.description}</p> 
     </header> 
     <ul> 
     <li>Lorem ipsum</li> 
     </ul> 
     <ul> 
     <li>Dolor sit</li> 
     </ul> 
    </div> 
    } 
}) 

var WidgetsContainer = React.createClass({ 
    render() { 
    return <div className="widgetsContainer"> 
     {this.props.data.map(widget => 
     <Widget key={widget.id} widget={widget}/> 
    )} 
    </div> 
    } 
}) 

var Dashboard = React.createClass({ 
    getInitialState() { 
    return { 
     data: [] 
    } 
    }, 
    handleWidgetConfig(widget) { 
    this.setState({ 
     data: [ 
     ...this.state.data, 
     {id: uuid.v4(), ...widget}, 
     ] 
    }) 
    }, 
    render() { 
    return <div className="dashboard-content"> 
    <CreateWidgetDropdown updateWidgetConfig={this.handleWidgetConfig} /> 
    <WidgetsContainer data={this.state.data} /> 
    </div> 
    } 
}) 

var CreateWidgetDropdown = React.createClass({ 
    createNewWidget(e) { 
    e.preventDefault() 

    var form = e.target 

    var width = form.elements.width.value 
    var title = form.elements.title.value 
    var description = form.elements.description.value 

    this.props.updateWidgetConfig({ 
     width, 
     title, 
     description, 
    }) 
    }, 
    render() { 
    return <div className="page-dropdown"> 
     <div className="page-dropdown-header"> 
     <h2 className="wrapper">Add a Widget</h2> 
     </div> 
     <div id="page-dropdown-content"> 
     <form className="page-dropdown-form" onSubmit={this.createNewWidget}> 
      <div className="choose-widget-type"> 
      <h3>Choose a Widget Type</h3> 
      <div className="widget-type table"> 
       <h4>Table</h4> 
       <div className="widget-type-icon"> 
       <img src="" alt="" /> 
       </div> 
       <ul className="widgetWidth"> 
       <li> 
        <label> 
        1/3 Width 
        {' '} 
        <input name="width" type="radio" value="1/3 Width" defaultChecked/> 
        </label> 
       </li> 
       <li> 
        <label> 
        2/3 Width 
        {' '} 
        <input name="width" type="radio" value="2/3 Width" /> 
        </label> 
       </li> 
       <li> 
        <label> 
        Full Width 
        {' '} 
        <input name="width" type="radio" value="Full Width" /> 
        </label> 
       </li> 
       </ul> 
      </div> 

      <div className="create-widget-header"> 
       <h3>Widget Header (Optional)</h3> 
       <label> 
       Widget Title (30 characters max) 
       {' '} 
       <input type="text" name="title" required /> 
       </label> 
       <label> 
       Widget Description (50 characters max) 
       {' '} 
       <textarea name="description"></textarea> 
       </label> 
      </div> 
      <button type="submit">Add Widget</button> 
      <button type="reset">Cancel</button> 
      </div> 
     </form> 
     </div> 
    </div> 
    } 
}) 

ReactDOM.render(<Dashboard />, document.getElementById('app'))

来源

2016-07-07 03:59:13

获取选中的单选按钮的值

回答

相关问题