Support checkboxes

[ezhlobo]

Hi! I have a problem with setting up checkboxes inside formous. What's the best way to do it?

Now I have to do something like this:

<Checkbox
  checked={this.state.rememberMeValue}
  onBlur={(event) => {
    event.target.value = this.state.rememberMeValue;
    rememberMe.events.onBlur(event);
  }}
  onChange={(event) => {
    this.setState({ rememberMeValue: !this.state.rememberMeValue });
    event.target.value = this.state.rememberMeValue;
    rememberMe.events.onChange(event);
  }}
>
  Remember me
</Checkbox>

I guess checkboxes aren't supported by formous, are they?

[jhsu]

@ezhlobo with a checkbox onChange, you can access the event.target.checked property to see if it is checked, so you could translate that to the value

for example if your field name in formous is rememberMe:

<input
  type="checkbox"
  checked={this.props.fields.rememberMe.value}
  onChange={(event) => {
    this.props.fields.rememberMe.events.onChange({
      target: { value: event.target.checked }
    });
  }}
  >
  Remember me
</input>

and you could pull it to some helper function:

function onCheckedHandler(field) {
  return function(event) {
    field.events.onChange({
      target: { value: event.target.checked }
    });
  };
}

// and using it
<input
  type="checkbox"
  checked={this.props.fields.rememberMe.value}
  onChange={onCheckedHandler(this.props.fields.rememberMe)}
  >
  Remember me
</input>

[ffxsam]

@ezhlobo I realize support for checkboxes and radios is not great.. or even present. We're on a temporary code freeze for now, but it'll get addressed during the rewrite.

[ezhlobo]

@ffxsam thank you, I understood!

@jhsu Yeah I've did the same trick to make rememberMe workable I just thought that there is any good solution which I can't find in documentation.