Input and hooks

[kbachl]

Hi,

so we got a load of form like elements like e.g.: Input
( https://sap.github.io/ui5-webcomponents-react/?path=/docs/inputs-input--default-story )

However, how does one make it really useful by binding it to a property using hooks?

e.g.: How to bind this input to that useState? One cant even use the regular onChange since the events there are useless CustomEvents without any access to value ... with typescript its locked tight

const [myValue, setValue] = useState('value')

<Input
        placeholder={'Enter Value'}
        className=""
        onChange={function noRefCheck(){}}
        onInput={function noRefCheck(){}}
        onSubmit={function noRefCheck(){}}
        onSuggestionItemPreview={function noRefCheck(){}}
        onSuggestionItemSelect={function noRefCheck(){}}
        onSuggestionScroll={function noRefCheck(){}}
        slot=""
        style={{}}
        tooltip=""
    />

while in normal react is it as easy as this:

const [myValue, setValue] = useState('value')
<input type="text" value={myValue} onChange={(e : React.FormEvent<HTMLInputElement>) => setValue(e.currentTarget.value)}/>
<div>Output: {myValue} </div>

[MarcusNotheis]

Hey @kbachl,

it should be almost the same with our Input component: you can access the current value via event.target.value:

const MyComponent = () => {
  const [value, setValue] = useState("");

  const onInputChange = useCallback(
    (event) => {
      setValue(event.target.value);
    },
    [setValue]
  );

  return <Input value={value} onInput={onInputChange} />;
};

This sample would update the value on every keystroke in the input, you can use onChange if you want to update it only once after the input looses focus.

You can also omit the useCallback if you want to, that's just a performance optimization.

I hope this helps 🙂

[MarcusNotheis]

aaah now I get it, thanks for clarifying one more time :) Let me check whether we can tweak our types, I guess we haven't use inline arrows so far so that issues slipped through.

[kbachl]

aaah now I get it, thanks for clarifying one more time :) Let me check whether we can tweak our types, I guess we haven't use inline arrows so far so that issues slipped through.

It would be awesome if you could make that possible... i know, useCallback is faster and better, but in case you just need it once or go fast it is way better to just go for {(event) => doSth(event.target.value)}

[MarcusNotheis]

Hey @kbachl,
I just got reminded about this conversation your other discussion - we tried to improve our typings and released them with ^0.16.0.
Please let me know whether things have improved now and please let us know if there is more to do.

[kbachl]

@MarcusNotheis 👍 thanks for the update, will upgrade to 0.16 and have a look

[kbachl]

@MarcusNotheis you might want to check #1576 - it seems #1545 didnt make it into 0.16.0 leading to a partially broken typescript in terms of code completion not working as interface is missing