trigger a function with onInput intypescript/React

March 21, 2022

I want to trigger my function elevatorCalc when some numbers are entered in my form field.

const elevatorCalc = () => {
console.log("test")
};

I’m trying something like this using onInput but I cant see "test" in my console

                        <div className="col-md-4" id="number-of-apartments">
                            <label htmlFor="residential_apartments">Number of apartments *</label>
                            <input onInput={() => {elevatorCalc}} required type="number" id="resinput_number-of-apartments" />
                        </div>

any help is greatly appreciated

>Solution :

You can use this as a starting point. Note how I pass onInput directly the function name as

onInput={elevatorCalc}

That function receives an HTML Event as input, which I named e
You can access its current value by using e.target.value

const App = (props) => {
  
  const elevatorCalc = (e) => {
    console.log(e.target.value);
  }
  
  return (
    <div className="col-md-4" id="number-of-apartments">
      <label htmlFor="residential_apartments">Number of apartments *</label>
      <input onInput={elevatorCalc} required type="number" id="resinput_number-of-apartments" />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>