jquense / react-formal

Sophisticated HTML form management for React
http://jquense.github.io/react-formal
MIT License
526 stars 52 forks source link

Help with using addInputTypes() #142

Closed lvdang closed 6 years ago

lvdang commented 6 years ago

I am trying to have my own custom addInputTypes() for radio button. I created my own custom component. I notice the value is always set to value="on" for some reason. How can I directly pass in value to my custom component?

// Attaching my custom ReactFormalRadio to addInputTypes()

e.g.

Form.addInputTypes('radio', ReactFormalRadio)

// Defining <Form.Fields

e.g.

<Form.Field name="name.favorite_fruit" type="radio" value="1" />

// ReactFormalRadio

` @flow / import * as React from 'react';

type PropsType = { value: string | number, name: string, onChange: (any) => mixed, selectedValue: string | number, };

export default class ReactFormalRadio extends React.PureComponent { static defaultProps = { value: '', };

constructor(props: PropsType) { super(props); this.handleOnChange = this.handleOnChange.bind(this); }

handleOnChange(e: Event) { console.log('ReactFormalRadio onChange', e.target.value); this.props.onChange(1); }

handleOnChange: (any) => mixed;

render(): React.Node { const optional = {checked: false};

if (this.props.selectedValue === this.props.value) {
  optional.checked = true;
}

return (
  <div>
    <input type="radio" value={this.props.value} onChange={this.handleOnChange} name={this.props.name}/>
  </div>
);

} }`

lvdang commented 6 years ago

nevermind - I figured out my problem.