How can I programmatically change the value of a field?

[MoSattler]

Hi!

I have a button, that when clicked, it would change / prefill certain inputs.
Is there a way to change the form values programatically like that?

[edmundhung]

Hi @MoSattler, there are 2 approaches you can try:

// Approach 1 - Controlled input
const [value, setValue] = useState();

// Just set the state on button click
<input value={value} onChange={event => setValue(event.target.value)} />
<button type="button" onClick={() => setValue('something')}>Action</button>


// Approach 2 - Update the input value with useInputEvent
// This will also emit a change / input event and trigger validation based on your form's configuration.
const [ref, control] = useInputEvent();

<input ref={ref} />
<button type="button" onClick={() => control.change('something')}>Action</button>

[MoSattler]

Hey @edmundhung - I previously tried approach 1, but I couldn't get it to work without interfering with conform's default values.

I will checkout the useInputEvent hook, thank you!

[chwizdo]

Hi @edmundhung I was quite confused the real usage of useInputEvent hook, and I have some unanswered questions:

1. Why use useInputEvent if I could just use useState to update the hidden input?
2. When and why to use each control method? E.g. control.change(), control.focus() and control.blur(). Because I noticed in your examples, not all control methods are used in all integrated components.
3. What's the differences of the onFocus handler in useInputEvent and the onFocus property in the referenced input?