Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

support checkbox radio #21

Merged
merged 2 commits into from
Jun 12, 2016
Merged

support checkbox radio #21

merged 2 commits into from
Jun 12, 2016

Conversation

yiminghe
Copy link
Member

@yiminghe yiminghe commented Jun 7, 2016

radio

class Form extends Component {
  onSubmit = (e) => {
    console.log('submit');
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((error, values) => {
      if (!error) {
        console.log('ok', values); // {normal: 'a'}
      } else {
        console.log('error', error, values);
      }
    });
  };

  reset = (e) => {
    e.preventDefault();
    this.props.form.resetFields();
  };

  render() {
    const { form } = this.props;
    const { getFieldProps } = form;
    return (<div style={{ margin: 20 }}>
      <h2>radio-group</h2>
      <form onSubmit={this.onSubmit}>
        <div style={ regionStyle }>
          <p>radio-group</p>
          <p>
            <label>
              a:
              <input
                type="radio"
                {...getFieldProps('normal.a', {
                  exclusive: true,
                  getValueFromEvent(e) {
                    return e.target.checked ? 'a' : '';
                  },
                  getValueProps(value) {
                    return {
                      checked: !!value,
                    };
                  },
                })}
              />
            </label>

            <br/>

            <label>
              b:
              <input
                type="radio"
                {...getFieldProps('normal.b', {
                  exclusive: true,
                  getValueFromEvent(e) {
                    return e.target.checked ? 'b' : '';
                  },
                  getValueProps(value) {
                    return {
                      checked: !!value,
                    };
                  },
                })}
              />
            </label>
          </p>
        </div>

        <div style={ regionStyle }>
          <button onClick={this.reset}>reset</button>
          &nbsp;
          <input type="submit" value="submit"/>
        </div>
      </form>
    </div>);
  }
}

checkbox

class Form extends Component {
  onSubmit = (e) => {
    console.log('submit');
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((error, values) => {
      if (!error) {
        console.log('ok', values); // {normal:{a:true, b: true}}
      } else {
        console.log('error', error, values);
      }
    });
  };

  reset = (e) => {
    e.preventDefault();
    this.props.form.resetFields();
  };

  render() {
    const { form } = this.props;
    const { getFieldProps } = form;
    return (<div style={{ margin: 20 }}>
      <h2>checkbox-group</h2>
      <form onSubmit={this.onSubmit}>
        <div style={ regionStyle }>
          <p>checkbox-group</p>
          <p>
            <label>
              a:
              <input
                type="checkbox"
                {...getFieldProps('normal.a', {
                  valuePropName: 'checked',
                })}
              />
            </label>

            <br/>

            <label>
              b:
              <input
                type="checkbox"
                {...getFieldProps('normal.b', {
                  valuePropName: 'checked',
                })}
              />
            </label>
          </p>
        </div>

        <div style={ regionStyle }>
          <button onClick={this.reset}>reset</button>
          &nbsp;
          <input type="submit" value="submit"/>
        </div>
      </form>
    </div>);
  }
}

@coveralls
Copy link

Coverage Status

Coverage decreased (-0.4%) to 90.889% when pulling 7bd0965 on radio_checkbox into 413dc0a on master.

@ChrisFan
Copy link

ChrisFan commented Jun 7, 2016

一些 angular 的写法供参考:

之前采用的 radio group 的写法:

<fc-radio-group ng-model="data.group1">
    <fc-radio value="Apple">Apple</fc-radio>
    <fc-radio value="Banana">Banana</fc-radio>
</fc-radio-group>

另外针对 checkbox,通畅会支持 true-value & false-value:

<fc-checkbox 
  ng-model="checkboxModel.value2" 
  ng-true-value="YES" 
  ng-false-value="NO"
>
    value2: {{checkboxModel.value2}}
</fc-checkbox>

@ChrisFan
Copy link

ChrisFan commented Jun 7, 2016

angular material 针对 checkbox group 的写法:

<div ng-repeat="item in items">
    <md-checkbox ng-checked="exists(item, selected)" ng-click="toggle(item, selected)">
        {{ item }}
    </md-checkbox>
</div>

@yiminghe
Copy link
Member Author

yiminghe commented Jun 7, 2016

model 数据结构是什么

@yiminghe yiminghe merged commit 71ef72f into master Jun 12, 2016
@yiminghe yiminghe deleted the radio_checkbox branch June 12, 2016 07:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants