Question

刚开始我在React的第一个应用程序，我想知道是否有React方式使用Radio Buttons，我有一个带有4个单选按钮的表单，我需要选择2个选项并将该信息发送到后端。

class RadioBtns extends Component {

  constructor (props) {
    super(props);
    this.state = {
      greet : '',
      hello : '',
    };
  }

  render () {
    return (
      <div>
        <div>
          <form>
            <input type="radio" value="first" name="greet" onChange={this._onChangeGreet}/> Option 1
            <input type="radio" value="second" name="greet" onChange={this._onChangeGreet}/> Option 2
            <input type="radio" value="three" name="hello" onChange={this._onChangeHello}/> Option 3
            <input type="radio" value="four" name="hello" onChange={this._onChangeHello}/> Option 4
          </form>
          <hr />
          <button type="submit" onClick={this._submitSettings}>YES!</button>
        </div>
      </div>
    );
  }

  _onChangeGreet = ({ target }) => {
      this.setState({
        greet : target.value,
      });
  }

  _onChangeHello = ({ target }) => {
      this.setState({
        hello : target.value,
      });
  }

  _submitSettings = () => {
    console.log('submit');
  }

}

export default RadioBtns;

如何将这些状态与值一起发送到商店？

在这里我有行动

@createActions(flux)
class RadioBtnsActions {

  constructor () {
    this.generateActions('optionSelected');
  }
}

export default RadioBtnsActions;

并在商店

import flux from 'flux';
import RadioBtnsActions from 'actions/RadioBtnsActions';

@createStore(flux)
class RadioBtnsStore {
  constructor () {
    this.state = {
      radioSelected : false,
    };
  }

  @bind(RadioBtnsActions.optionSelected)
  optionSelected (option) {
    this.setState({
      radioSelected : option,
    });
  }
}

export default RadioBtnsStore;

Answer 1

这是我们在项目中所做的事情（简化，运用你的想象力）：

首先创建一个呈现实际输入的RadioButton组件：

render(){
  <div>
     <input id={this.props.id} type="radio"
       name={this.props.name} value={this.props.value}
       checked={this.props.checked} onChange={this.onChange}/>
     <label htmlFor={this.props.id}>{this.props.label}</label>
 </div>
},

onChange: function(ev){
    this.props.onChange(ev.target.checked, this.props.value);
}

然后使用它来实现RadioButtonGroup组件：

render: function(){
    var name = this.name, value = this.props.value, onChange = this.onSingleRadioChange;
    var options = _.map(this.props.options, function(option){
        var id = name + '-' + option.value;
        return <RadioButton key={option.value} id={id} name={name} value={option.value} label={option.label} checked={option.value == value} onChange={onChange} />
    });

    return  <div>{options}</div>
},

onSingleRadioChange: function(checked, value){
    if(checked)
        this.props.onChange(value);
}

你可以像这样使用它：

<RadioButtonGroup name='greet' options={[{value: 'first', label: 'First'}, {value: 'second', label: 'Second'}]} onChange={val => { Actions.radioGroupChanged('greet', val);}}  />

Actions.radioGroupChanged是商店正在收听的操作。

不要忘记使用labels来获得更好的用户体验。

编辑：这里是商店的草稿，虽然我们使用Reflux，但它与您所拥有的API不同：

var store = Reflux.createStore({
    radioGroups: {greet: 'first', hello: 'three'}, //state of the radio button groups lives here

    init(){
      this.listenTo(Actions.radioGroupChanged, this.onRadioGroupChanged);
    },

    onRadioGroupChanged(group, value){
      this.radioGroups[group] = value;
      this.trigger(); //this notifies the component that the store changed;
    }
});

然后该组件侦听商店并更新其自己的状态：

componentDidMount(){
  this.listenTo(store, () => { this.setState({radios: store.groups}) });
}

render(){
   return <RadioButtonGroup name='greet' value={this.state.radios.greet} .../>
}

使用Flux上的单选按钮

1 个答案: