ref attrribute for react components about scalajs-react HOT 17 CLOSED

That's in the doc, my friend. Search for "ref" on the front page.
Also one of the examples show how to use ref.

from scalajs-react.

hmm , the example is for one of html elements , but Ripple is another react component , when i try to pass ref attribute on construction of component ,its not compiling ! , may be i am missing something ?

from scalajs-react.

Sounds like a feature I haven't used and don't know about. Is it new
because previously I went through their docs and ported everything I saw.

So you can pass in a ref into any component (element?) through it's
constructor. Ok, but then what happens? How does that work?

On 3 December 2014 at 09:40, Chandra Sekhar Kode [email protected]
wrote:

hmm , the example is for one of html elements , but Ripple is another
react component , when i try to pass ref attribute on construction of
component ,its not compiling ! , may me i am missing something ?

—
Reply to this email directly or view it on GitHub
#44 (comment)
.

from scalajs-react.

yeah its a new feature added on Nov 6th ..

use case :
You can define any public method on your component classes (such as a reset method on a Typeahead) and call those public methods through refs (such as this.refs.myTypeahead.reset()).

implementation :
They attaching detaching public instance of component with ref name .

Source Code :

https://github.com/facebook/react/blob/fd3f8e70e2aad999b02e6583e55f16da3aaec469/src/core/ReactRef.js

from scalajs-react.

Erm, I don't really understand your explanation, sorry. Regardless, has React published a small demo snippet? If so I'll use that as my guide and port it to Scala.

from scalajs-react.

sorry i posted bits of FB documentation ,everything mentioned here
http://facebook.github.io/react/docs/more-about-refs.html see Benfits

here are few examples :

https://github.com/facebook/react/blob/c96ea9abf28d7ffa465feb95c39e3dbb52beb050/examples/jquery-bootstrap/js/app.js

Component :  <BootstrapModal ref = "model" 
 accessing component close method
this.refs.modal.close();  

https://github.com/facebook/react/blob/5e2d926d655d398a29258f0b5967db99bf3d3323/docs/tips/15-expose-component-functions.md

from scalajs-react.

Just had a quick look at that link. I think we already had that working a few versions back, I don't get it. I'll have to sit down and look at this properly instead of just skimming at the speed of light ∴ it goes in the queue, I'll do it later.

from scalajs-react.

cool ,thanks mate , take your time :)

from scalajs-react.

mate could you please throw some light on this issue ? , will see if i can make it work ^^

from scalajs-react.

This is low priority (to me). You could help me by putting a test case together or something like that, then I would have less to do and would do it sooner. Otherwise I'm not sure when I'll give this a proper look...

from scalajs-react.

@chandu0101 When building a JS component in React, you parameterise it with a JS object. That JS Object can contain a 'ref' property. In a backend, you can access the underlying component for the 'ref' as per the examples with a little work:

// Build the Material UI Dialog
def buildDialog(ref: String, children: ReactNode*) = js.Dynamic.global.materialui.Dialog(
    js.Dynamic.literal("ref" -> ref), 
    children.toJsArray).asInstanceOf[ReactComponentU_]

// A mounted representation of the Material UI Dialog
trait Dialog_M extends js.Object {
  def show(): Unit = ???
  def dismiss(): Unit = ???
}

class DialogBackend(T: BackendScope[Unit, Unit]) {
    def dismiss = Ref[HTMLDivElement]("my-ref")(T).asInstanceOf[Dialog_M].dismiss
    def show = Ref[HTMLDivElement]("my-ref")(T).asInstanceOf[Dialog_M].show
}

I managed to work this out by doing the following:

1. I looked at what type the Ref.apply method wanted, it wanted the scope of a mounted component "ComponentScope_M[_]".
2. I saw that ComponentScope_M[_] was available in a Backend by looking at the sources
3. I inspected the ComponentScope_M[_] using "console.log"
4. I found in 3. that "ComponentScope_M[_]" was the mounted JS component, exactly as described in TYPES.md and decided that it was OK to cast to "Dialog_M" above.

from scalajs-react.

@wav thank you for your answer , but rather I want to see that change in ReactComponentB itself , because i can't leave such a elegantly designed API ( this is the main reason for me to use this lib ) to code sorry...
btw you porting material UI to scalajs-react and want to release opensource ? ,if yes please let me know i'll stop from my side ...

@japgolly
mate i sent a PR #49 ,please check it and let me know if any changes required.

from scalajs-react.

@wav That's a good example too, thanks.

from scalajs-react.

@japgolly I've uploaded an example wrapper of material-ui, here which is where the example comes from.

from scalajs-react.

Finally done, use Ref.to(component, name). Enjoy guys.

from scalajs-react.

Hi JapGolly,

Still not clear on how to create a ref to a component. Can you maybe give an example of this?

Edit: Nevermind - I found an example in 'RefTest.scala.' I seem to have it working at this point.

from scalajs-react.

@jclyons Glad to hear it.

from scalajs-react.