React Button disabled 属性不适用于条件

Question

我有一个包含两个子元素的 DIV。这些元素是按钮，我想在某些条件下向这些按钮添加 disabled 属性，当我将条件应用于这些按钮时它不起作用。 尽管条件正确，但我不知道为什么这不起作用。

我的代码如下：

< div className = 'change-page' >
  <
  button
type = 'button'
disabled = {
  page === 0 ? 'true' : ''
}
onClick = {
    () => setPage(page > 1 ? page - 1 : 1)
  } >
  Prev <
  /button>

  <
  button
type = 'button'
onClick = {
  () => setPage(page + 1)
}
disabled = {
    next === 1 ? '' : 'true'
  } >
  Next <
  /button> <
  /div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>

这里 page === 0 表示用户在第一页，所以 prev 按钮应该被禁用，next 按钮也是如此如果没有可用的下一页，则此 next 按钮应禁用。

请提出解决此问题的可能方法。

Answer 1

尝试返回布尔值而不是字符串：

disabled={page === 0}

Answer 2

这：() => setPage(page > 1 ? page - 1 : 1) 表明您的页面索引是基于 1 的，因此 page 永远不会是 0。不确定，next 的值到底是什么，但是当next 等于某个特定数字时禁用 Next 按钮也看起来很可疑。

Answer 3

您从 0 设置起始页， 当 page === 2 然后设置页面返回 1。 当 page ===1 then 时，prev 按钮将 1 分配给 *page

  () => setPage(page > 1 ? page - 1 : 1)

这是我的工作代码。

import React, { useState } from 'react';

const MyComponent = () => {

  const [page, setPage] = useState(1); // Starting from page 1
  const [next, setNext] = useState(1);
  return (
    <div className='change-page' >
      Page: {page} <br />
      Next: {next} <br />
      <button
        type='button'
        disabled={page === 1} // If page == 1 then disabled Button
        onClick={
          () => setPage(page > 1 ? page - 1 : 1)
        } >Prev </button>

      <button
        type='button'
        onClick={
          () => setPage(page + 1) // On next increment the page
        }
        disabled={next === 1 ? false : true} >
        Next </button>
    </div>
  )
}
export default MyComponent;