输入事件监听器（On Change 事件监听器）它的工作和错误解释？答案

【问题标题】：Input Event Listener (On Change event Listener ) its working and Error Explanation?输入事件监听器（On Change 事件监听器）它的工作和错误解释？
【发布时间】：2022-12-05 00:04:21
【问题描述】：

import React, { useState } from "react";
import "./App.css";

function App() {
  const [input, setInput] = useState();
  function fun1(e) {
    // console.log(e);
    // console.log(e.target);
    // console.log(e.target.value);
    setInput(e.target.value);
  }
  return (
    <div>
      <input type="text" onChange={fun1} />
      <h1>{input}</h1>
    </div>
  );
}

export default App;

enter image description here

在输入字段上，我尝试编写演示示例，它通过使用 React Hook (useState) 更改基于功能的组件的状态动态显示在屏幕上。但是当我在 fun1 中使用对象 e 时，我无法理解它的实际工作方式，即 fun1(e) 控制台日志（e.target）控制台日志（e.target.value）它究竟意味着什么？我无法得到当我不使用 e ，而是直接在 setInput(this.target.value) 中使用 this 关键字时，它显示错误未定义的。为什么它不适用于 this ？

【问题讨论】：

标签： javascript reactjs object react-hooks this

【解决方案1】：

在输入中添加值属性

  <input type="text" value={input} onChange={fun1} />

【讨论】：