使用Flux上的单选按钮

debugcn 发表于 Dev

反应

刚刚在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;

弗拉基米尔·罗文斯基

这是我们在项目中所做的事情（简化后，请发挥您的想象力）：

首先，您创建一个呈现实际输入的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您的商店正在监听的动作在哪里。

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

编辑：虽然我们使用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} .../>
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。