Javascript：如何实时显示变量？

每次在输入中输入内容时（如在控制台中看到的内容），我都希望显示：

let inputNumber=0；
handleInputChange（e）{
inputNumber=e.target.value；
控制台日志（输入编号）；
}
数据：{inputNumber}

---

我怎样才能做到这一点呢？

如果您使用的是React和functional components，它看起来会像这样。您只需要将输入存储在一个状态中，并在输入更改时更新状态

功能组件（）{
const[input，setInput]=useState（0）；
常量handleInputChange=（e）=>{
设置输入（e.target.valueAsNumber | | e.target.value）；
console.log（e.target.valueAsNumber | | e.target.value）；
}
返回(
数据：{input}
)
}

如果您使用类组件，请将您的inputNumber存储在

状态中

constructor(props) {
    super(props);

    this.state = { inputNumber: 0 };
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(e) {
    this.setState({ inputNumber: e.target.value });
  }

  render() {
    return (
      <div>
        <input
          type="number"
          value={this.state.inputNumber}
          onChange={this.handleInputChange}
          required
          pattern="[0-9]*[.,][0-9]*"
        />
        <h4>Data: {this.state.inputNumber}</h4>
      </div>
    );
  }

构造函数（道具）{
超级（道具）；
this.state={inputNumber:0}；
this.handleInputChange=this.handleInputChange.bind（this）；
}
handleInputChange（e）{
this.setState（{inputNumber:e.target.value}）；
}
render（）{
返回(
数据：{this.state.inputNumber}
);
}

用于演示的代码沙盒

---

您需要通过

const[number，setNumber]=useState（）
让inputNumber=0；
handleInputChange（e）{
inputNumber=e.target.value；
设置编号（输入编号）；
}
数据：{number}

将该数字存储在状态中，但这取决于您使用的是类组件还是功能组件？类组件