Any way to pass the value of an event to say an onChange handler?

I am guessing I would need to do something like:

onChange={(event) => {customHandler(event.target.value)}}

onChange={(event) => {customHandler(event.target.value)}}

Is there a better way to do this?

20 Replies

Eve•3mo ago

You either do it like that, or onChange={customHandler} and customHandler will receive the event directly, and can parse the value out of it.

hcker2000OP•3mo ago

ok i just wanted to make sure those were my two options is there one preferred over theother? i would assume receiving the event directly an parsing it out in the function

Eve•3mo ago

I tend to prefer the {() => customHandler()} syntax personally. It just lets me keep all my on* calls looking the same, whether I'm passing an event, or calling without one, or passing some other values from somewhere.

hcker2000OP•3mo ago

Sounds good thanks for the help

Alex Lohr•3mo ago

You can just use the setter of a signal as event handler and call the accessor in another event (or even combine multiple event signals in an effect).

hcker2000OP•3mo ago

if you call the setter of a signal how does it know what value to use?

Eve•3mo ago

It doesn't, it just puts the event into the signal

hcker2000OP•3mo ago

ok just wanted to make sure there was no magic going on there

Eve•3mo ago

https://playground.solidjs.com/anonymous/1a303510-95ac-4197-a662-178aa57b7ae7 Seems a weird way to do it to me, but it does work.

hcker2000OP•3mo ago

the more you know right

Eve•3mo ago

Yeah. Who knows, could come in handy some day

hcker2000OP•3mo ago

for sure one more general question im trying to write a search filter that works with an array of elements that shows on the page using <For> i added the search text to my store and was hoping that this would work but it dosnt because it dosnt modify the store im looping over

hcker2000OP•3mo ago

hcker2000OP•3mo ago

so that being said would it be better to make a class/visible property on my sounds stores objects and then as i change the search i can run a find and update them if needed which will trigger the redraw on the for?

Alex Lohr•3mo ago

Use a memo for the filtered list.

hcker2000OP•3mo ago

So i have not used memos yet but i understand the gist of them is to only redraw when underlying data is changed. so i could make a memo that would use the search state and then filter and return the objects i want based on the search?

hcker2000OP•3mo ago

Eve•3mo ago

What I've done in the past instead of modifying the store, is create a signal that's just an array of fields I want to show, and then read the contents I want from the actual dataStore

<For each={fieldsSet()}>
  {(field) => <div>{dataStore[field]}</div> 
</For>

<For each={fieldsSet()}>
  {(field) => <div>{dataStore[field]}</div> 
</For>

Then whenever I want to add/remove anything, I just do something easy like setFieldsSet(fieldsSet().concat('newField')) also allows me to do stuff like fieldsSet().has('someField') to quickly check if a given field is included or not.

hcker2000OP•3mo ago

interesting idea @Emily

const getSounds = createMemo(() => {
    if (store.search == '') {
        return store.sounds
    }

    return store.sounds.filter(obj => obj.title.includes(store.search))
})

const getSounds = createMemo(() => {
    if (store.search == '') {
        return store.sounds
    }

    return store.sounds.filter(obj => obj.title.includes(store.search))
})

that works well

Gaming

Programming

Any way to pass the value of an event to say an onChange handler?