CODEWITHSUNDEEP
javascriptreactjs
Adam Ostrowicki
Adam Ostrowicki

Reputation: 25

Trigger onChange event manually

I would like to call my onChange manually.

Here's my select with onChange (I pass onChangeSelect as a prop from parent component)

return(
   <Form Control disabled={disabled}
      <NativeSelect ref={ref} onChange={onChangeSelect}>
       ...

And I'd like to call that onChange every time my variable changes and is empty 

useEffect(() => {
    if (requiredSelect[0].length > 0 || id === "root1") { setDisabled(false) }
    else { ref.current.value = ([[], []]); ref.current.onChange ; setDisabled(true); }
}, [requiredSelect])

And here's onChangeSelect in parent component

<Child onChangeSelect={(e) => rootChange(e)}>

and what it does

const rootChange = e => { setRootSelect(e.target.value.split(',')); }

Upvotes: 0

Views: 5094

Answers (1)

Agney
Agney

Reputation: 19194

The simplest solution here would be to change the definition of your rootChange function to accept the value instead of the event itself.

const rootChange = value => { setRootSelect(value.split(',')); }

// In parent:
<Child onChangeSelect={rootChange}>

// Select
<NativeSelect ref={ref} onChange={(e) => onChangeSelect(e.target.value)}>

You can trigger the function manually with:

onChangeSelect(whateverValueYouWant); // notice that you need the brackets when calling the function.

Answer in Typescript

//Child Component
type PropsType = {
  onChange: (value: string) => void;
  value: string;
};
const CustomInput: FC<PropsType> = (props: PropsType) => {
 const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    props.onChange(event.target.value);
  };
  return (<input
          onChange={onChange}
          type="text"
          value={props.value}></input>);
};

//Parent Component
const [input, setInput] = React.useState('');

<CustomInput
            onChange={(value: string) => {
              setInput(value);
            }}
            value={input}></CustomInput>

Upvotes: 1

Related Questions