获取选中的单选按钮的值

Question

我正在尝试为表单中的三个互斥选项设置三个单选按钮。该表单还包括一个文本输入和文本区域。单击提交按钮时，需要将选中的单选按钮的值以及文本输入和文本区域的值分配为道具的值。

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'));

Answer 1

我建议你使用<input type="radio"> 而不是<input type="checkbox">：

<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 获取您需要的所有值，并且可以使用.value getter on 获取无线电输入的值collection it's represented by 中的form.elements：

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,
  })
},

---

现场示例：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'))