Javascript：如何实时显示变量？

Question

我想每次在输入中输入某些内容时显示（就像我在控制台中看到的那样）：

let inputNumber = 0;

    

handleInputChange(e) {

  inputNumber = e.target.value;

  console.log(inputNumber);

}

    

<input type="number" onChange={this.handleInputChange} required pattern="[0-9]*[.,][0-9]*"/>

<h4>Data : {inputNumber}</h4>

我怎样才能做到这一点 ？

Answer 1

如果您使用 React 和函数式组件，它看起来会像这样。您只需将输入存储在状态中，并在输入更改时更新状态。function Component () {&nbsp; &nbsp; const [input, setInput] = useState(0);&nbsp; &nbsp; const handleInputChange = (e) => {&nbsp; &nbsp; &nbsp; &nbsp; setInput(e.target.valueAsNumber || e.target.value);&nbsp; &nbsp; &nbsp; &nbsp; console.log(e.target.valueAsNumber || e.target.value);&nbsp; &nbsp; }&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <input type="number" value={input} onChange={handleInputChange} required pattern="[0-9]*[.,][0-9]*"/>&nbsp; &nbsp; &nbsp; &nbsp; <h4>Data : {input}</h4>&nbsp; &nbsp; )}

Answer 2

您需要通过以下方式跟踪它进入状态const [number, setNumber]=useState()let inputNumber = 0;handleInputChange(e) {&nbsp; inputNumber = e.target.value;&nbsp; setNumber(inputNumber);}<input type="number" onChange={this.handleInputChange} required pattern="[0-9]*[.,][0-9]*"/><h4>Data : {number}</h4>

Answer 3

如果您使用类组件，请将您的 inputNumber 存储在stateconstructor(props) {&nbsp; &nbsp; super(props);&nbsp; &nbsp; this.state = { inputNumber: 0 };&nbsp; &nbsp; this.handleInputChange = this.handleInputChange.bind(this);&nbsp; }&nbsp; handleInputChange(e) {&nbsp; &nbsp; this.setState({ inputNumber: e.target.value });&nbsp; }&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="number"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={this.state.inputNumber}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={this.handleInputChange}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; required&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pattern="[0-9]*[.,][0-9]*"&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; <h4>Data: {this.state.inputNumber}</h4>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }用于演示的代码沙箱