Question

我有一个看起来很简单的问题。在下面的代码中，我无法更新变量引用，但我可以直接设置它，你能告诉我为什么吗？

这会正确更新HTML元素：

startTimer() {
    let timerOutput = this.timerOutput.innerHTML = this.state.timer.toLocaleTimeString();
}

使用此代码但DOM中没有任何反应：

startTimer() {
        let timerOutput = this.timerOutput.innerHTML;
        timerOutput = this.state.timer.toLocaleTimeString();
    }

打印整个Timer容器组件：

export class Timer extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {timer: new Date()};
      }

    startTimer() {
        let timerOutput = this.timerOutput.innerHTML;
        timerOutput = this.state.timer.toLocaleTimeString();
        // timerOutput = this.state.timer.toLocaleTimeString();
        console.log(this.state.timer);
    }

    handleClick(e) {
        this.startTimer(e);
    }


  componentDidMount() {

  }

  render() {

    return (
      <section>
        <div id="timerOut"
        ref={(output) => {this.timerOutput = output }}
        ></div>
        <button onClick={this.handleClick.bind(this)} value="Click me" />;
        <h2>It is {this.state.timer.toLocaleTimeString()}.</h2>
      </section>
    );
  }
}

export default Timer;

Answer 1

当你这样做时：

let timerOutput = this.timerOutput.innerHTML;
timerOutput = this.state.timer.toLocaleTimeString();

您不是要更改元素的innerHTML，而只是更改它的副本。要更改DOM，您需要执行以下操作：

this.timerOutput.innerHTML = this.state.timer.toLocaleTimeString();

编辑：要清楚，它确实回答了你的问题，但这并不是做到这一点的“反应方式”。您应该使用setState()管理州。

Answer 2

您需要使用setState重新渲染组件。尝试更改startTimer()方法，如下所示。如果您要尝试的是每次单击按钮时显示当前时间。

startTimer() {
    this.setState({timer: new Date()})
}

更新变量

2 个答案: