frankcollins3 / fill_container

codecamp team project updated with new icon screen menu + puppeteer icon search, GraphQL, redux, relational psql !mongo, and accuweatherAPI
1 stars 0 forks source link

invoke 2 functions at once. no access to event? [3:01pm] #98

Closed frankcollins3 closed 1 year ago

frankcollins3 commented 1 year ago

how to invoke 2 functions at once in inline props:

already solved the issue but was wrestling late last night with:

my problem was that I couldn't set up the inline onChange={} handler of the input to take event object parameters.

first proposed approach: func: use event object params and invoke 2 other separate callback functions with clones of the event object.

*let hashedValue:string = ''.repeat(value.length) $(event.target).attr('value', hashedValue)**

this extremely persistent, broad reaching and mutative functionality that makes event.target.value from input become '*' // this isn't to hash password just to get '**' dummy data while the user is typing in a password.

second proposed approach: I was able to get 2 functions to fire at the same time but couldn't get access to event object properties. I tried accessing react elem props with jquery to no success.

First movement forward has taken place:

const passwordinputhandler = (event: React.ChangeEvent) => { // Access event properties here };

onChange={(event) => { passwordinputhandler(event); passwordinputhandler2(event); }}>

frankcollins3 commented 1 year ago

https://github.com/frankcollins3/fill_container/assets/73137934/b5c3fecd-ffe5-42c0-8c7c-d32f62336295

passwordinputhandler(event) => SET_PASSWORD_INPUT(event.target.value)

passwordinputhandler2(event) => { let hashedValue:string = event.target.value SET_DUMMY_PASSWORD_INPUT({payload: hashedValue}) }

👍 dummy password successfully set passwordinputhandler2: yields the input to have the blue "***" going across. 👎 unsuccessful: how inputhandler1() & SET_PASSWORD(event.target.value) have asterisks asserted upon it

<input id="password" type="text" style={{ color: '#72d3fe', fontSize: '20px'}} onFocus={inputfocus} value={DUMMY_PASSWORD_INPUT} onMouseEnter={ghosttext} // onChange={prepasswordinputhandler} onChange={(event) => { passwordinputhandler(event); passwordinputhandler2(event); }}>

2 functions invoked at once. atleast the react.ChangeEvent works and the elem is within inputhandler1 && handler2

value={DUMMY_PASSWORD_INPUT}

[3:16pm]