獲取檢查的單選按鈕的值

Question

我正在嘗試為窗體中的三個互斥選擇設置三個單選按鈕。 該表格還包括文本輸入和文本區域。 單擊提交按鈕后，需要將選中的單選按鈕的值以及文本輸入和文本區域的值分配為props的值。

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屬性，您可以使用表單的elements集合通過refs獲取所需的所有值，並且可以使用form.elements 表示的集合上的.value getter獲取單選輸入的值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'))