Roact Handler Help

Help and Feedback Scripting Support
#1

So I’ve never really made a scripting support topic before, but this has been very confusing.

I have this Character Customization module which basically returns a stateful component. The problem is I want to unmount the handler inside of the module itself. If you look at Line 241 for the component module, you will see that I am trying to connect a function to MouseButton1Click event. Basically after the done button is pressed, it is supposed to unmount the UI. The problem is I need the handler which gets returned after I create the component.

Example:

local Customization = require(SharedModules.UI.CharacterCustomization)
local handler = Roact.mount(Roact.createElement(Customization), PlayerGui, "Customization")
-- I need the handler so I can pass it to Roact.unmount(handler)
-- I only want to unmount after the done button as been pressed, but the component module does not know where the handler is.

Customization Component Module:
https://pastebin.com/gwRnypbh

I used BindableEvents but it seems like I can’t pass it as prop in a stateful component which makes this hard. I feel like I am missing something very obvious, but I am not sure.

#2

MouseButton1Click events can only be fired through the client. Does your script run on the server or the client?

#3

This runs on the Client. I am using Roact. My problem isn’t the event being fired, it’s retrieving the handler within the module which is returned after the component is created.

#4

So I’m just going to put the solution I got from LPGhatguy here in case anyone has this problem in the future.

local handle
local function unmount()
  Roact.unmount(handle)
end

handle = Roact.mount(Roact.createElement(App, { unmount = unmount }))

Basically, you create an undefined variable which later gets assigned to the handle. Create a callback function to unmount the handle and finally pass it as a prop.

1 Like