在 Flux 上使用单选按钮

Question

刚在 React 中启动我的第一个应用程序，我想知道是否有 React 方法来处理单选按钮，我有一个带有 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 上使用单选按钮

Working with Radio Buttons on Flux

javascript

flux

reactjs