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

我建议您使用promo_id代替promo_id transac_id date rank -------- ---------- ---- ---- 656265 213516 05/21/2016 1 656265 213520 05/21/2016 2 656265 213521 05/21/2016 3 656265 213530 05/22/2016 4 656265 213540 05/25/2016 5 895134 365124 06/01/2016 1 895134 365130 06/03/2016 2 895134 365135 06/04/2016 3：

<input type="radio">

然后，如果您使用表单的onSubmit事件......

<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>属性，您可以使用form's elements collection获取<form className="page-dropdown-form" onSubmit={this.createNewWidget}>所需的所有值，并且可以使用{4}}获取无线电输入的值name中refs的{{1}}吸气器：

.value

实例：collection it's represented by

您可以克隆以进行开发（使用热重新加载）并构建此示例：http://stackoverflow-38236634.surge.sh/

工作示例的完整代码：

form.elements

获取已检查单选按钮的值

1 个答案: