Question

我正在用.get()制作日历，但是我对此有疑问。

moment()

const {useState} = React;

const Calendar = () => {
  const [value, setValue] = useState(moment());
  function handleClick(date){
    console.log('handleClick called', date);
    setValue(date);
  }
  return (
    <div>
      <button onClick={()=> handleClick(value.add(-1,'month')) }> - </button>
      <b>{ value.format('YYYY-MM') } </b>
      <button onClick={()=> handleClick(value.add(1,'month')) }> + </button>

    </div>
  );
}

const App = () => (<Calendar />)
ReactDOM.render(<App />, document.getElementById('root'));

当我单击按钮时，属性会明显更新，但不会进行重新渲染。

我可以猜到它是关于<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script> <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="root" />的，但是我不知道什么是解决这个问题的最合适方法。

谢谢。

Answer 1

您可以使用clone创建一个新的矩实例，而不用更改初始实例。

const {useState} = React;

const Calendar = () => {
  const [value, setValue] = useState(moment());
  function handleClick(date){
    console.log('handleClick called', date);
    setValue(date);
  }
  return (
    <div>
      <button onClick={()=> handleClick(value.clone().add(-1,'month')) }> - </button>
      <b>{ value.format('YYYY-MM') } </b>
      <button onClick={()=> handleClick(value.clone().add(1,'month')) }> + </button>

    </div>
  );
}

const App = () => (<Calendar />)
ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root" />

当Moment（）更改时重新渲染组件

1 个答案: