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

33 messages · Page 1 of 1 (latest)

patent anchor
#

I am guessing I would need to do something like:

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

Is there a better way to do this?

magic quarry
#

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

patent anchor
#

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

magic quarry
#

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.

patent anchor
#

Sounds good thanks for the help

near obsidian
#

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).

patent anchor
#

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

magic quarry
#

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

patent anchor
#

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

magic quarry
#

Seems a weird way to do it to me, but it does work.

patent anchor
#

the more you know right

magic quarry
#

Yeah. Who knows, could come in handy some day

patent anchor
#

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

#

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?

near obsidian
#

Use a memo for the filtered list.

patent anchor
#

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?

magic quarry
#

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>
#

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.

half bane
patent anchor
#

interesting idea @magic quarry

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

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