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 () {

    const [input, setInput] = useState(0);

    const handleInputChange = (e) => {

        setInput(e.target.valueAsNumber || e.target.value);

        console.log(e.target.valueAsNumber || e.target.value);

    }

    return (

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

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

    )

}

Answer 2

您需要通过以下方式跟踪它进入状态

const [number, setNumber]=useState()

let inputNumber = 0;

handleInputChange(e) {

  inputNumber = e.target.value;

  setNumber(inputNumber);

}

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

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

Answer 3

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

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>

    );

  }

用于演示的代码沙箱