Передать значение Input в handleMethod

Question

Задача - передать каждый введенный символ методу handleExchange. В этом методе произойдет обработка введенных значений.

Как передать входной тег в аргумент метода handleExchange?

function App() {

    function handleExchange(value) {
      console.log(value)
    }

    return (
      <input className = "input-r" placeholder = "Type here" />
    )


}

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>

Я пытался сделать это:

function App() {
  function handleExchange(value) {
    console.log(value);
  }
  
  return (
    <div>
      <input className="input-r" placeholder="Type here" onKeyPress={handleExchange(this.value)} /> 
      {/*or*/}
      {/* onKeyPress={handleExchange(event) */}
    </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>

Answer 1

Вы должны использовать событие onChange и получить значение из event.target.

Вот вам пример:

function App() {
  function handleExchange(e) {
    console.log(e.target.value);
  }
  
  return (
    <div>
      <input className="input-r" placeholder="Type here" onChange={handleExchange} /> 
      {/*or*/}
      {/* onKeyPress={handleExchange(event) */}
    </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>

Answer 2

Добавьте обработчик onChange к элементу input. Примечание: обработчик передает event, поэтому вам нужно получить значение из цели события. Здесь я использовал разрушение .

function App() {

    function handleExchange(e) {
      const { target: { value } } = e;
      console.log(value)
    }

    return (
      <input
        className="input-r"
        placeholder="Type here"
        onChange={handleExchange}
      />
    );

}

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>