search

banderson / generator-flux-react

A yeoman generator for app based on Facebook's Flux/React architecture
332 stars 35 forks source link

Should handleToggle use a different function to get the checkbox state? #16

Closed srmelody closed 9 years ago

srmelody commented 9 years ago

Great project, thanks for sharing it. I had to change this: if (this.refs.checkbox.getDOMNode().checked) { to this: if (this.refs.checkbox.getChecked() ) {

to get it to find the dom node. Is this something different with the new version of react? I'm just making sure I'm not missing something.

banderson commented 9 years ago

Thanks for taking the time @srmelody!!

It turns out the issue is each UI framework handles this differently, with a different API. The example code you provided only works for React Bootstrap, as you can see it implemented here. Material UI uses isChecked

The reason behind this is getDOMNode() returns the underlying native DOM node, and Material UI, for example, implements the visual parts using SVG as a proxy for the checkbox. Ugh.

If you want to alter your commit to include this change only for Bootstrap, I'll gladly accept. However, with differences like this creeping up, I may pull support for these UI frameworks and just provide tutorials for setting them up after the fact.

Thanks again, Ben

tmoc commented 9 years ago

Thanks for making this issue. I wouldn't have figured out the problem at this phase of learning the framework had I not stumbled across this (didn't even cross my mind that the Input was a react-bootstrap component).

banderson commented 9 years ago

This should be all set as of the v0.4.0, I added changes for all 3 UI choices to make sure we got the API correct.

slin1202 commented 8 years ago

I'm using react-bootstrap and getChecked() is undefined in this.refs.checkbox. I am able to get it from this.refs.checkbox.props.checked? Am I doing something wrong?

Thanks for the generator btw, it's really helping me learn react and flux!