trigger a function with onInput intypescript/React

Question

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

You're not calling the function at the moment. onInput={() => {elevatorCalc}} needs to be onInput={() => {elevatorCalc()}} (or onInput={elevatorCalc}) — Nicholas Tower
– Nicholas Tower, Commented Mar 21, 2022 at 20:24

dukenicols · Accepted Answer · 2022-03-21 20:33:43Z

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>

Collectives™ on Stack Overflow

trigger a function with onInput intypescript/React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related