如果在ReactJS中多次選中復選框，如何禁用按鈕

我必須創建一個按鈕，該按鈕在選中復選框時激活，未選中時禁用。我能夠通過以下代碼實作這一點。

import React from "react";
import "./styles.css";
import{useState} from 'react'

export default function App() {

  const [change, setChange] = useState(true);
function buttonHandler(){
  setChange(!change)
}

  return (
    <div className="App">
      <button disabled={change}>Click Me</button>

      <input type="checkbox" onChange={buttonHandler}/>
      <input type="checkbox" onChange={buttonHandler}/>
      <input type="checkbox" onChange={buttonHandler}/>
      
    </div>
  );
}

現在我面臨另一個挑戰，如果選中了 1 個以上的復選框，我必須將其禁用。我嘗試使用物件和陣列操作，但它不起作用。關于如何實作這一點的任何建議。

uj5u.com熱心網友回復：

import React from "react";
import{useState} from 'react'

export default function App() {

  const [checkboxStatus, setCheckboxStatus] = useState(Array(3).fill(false));

  function buttonHandler(index){
    let status = [...checkboxStatus];
    status[index] = !status[index]
    setCheckboxStatus(status)
  }

  return (
    <div className="App">
      <button disabled={checkboxStatus.filter(status => status === true).length % 2 === 0}>Click Me</button>
      {Array(3).fill(0).map((_, index) => <input type="checkbox" checked={checkboxStatus[index]} onChange={() => buttonHandler(index)}/>)}
    </div>
  );
}

您可以通過跟蹤復選框的狀態而不是跟蹤按鈕的狀態來做到這一點。這是因為如果您知道所有復選框的狀態，則可以輕松計算按鈕的狀態。

由于內容相同，我還冒昧地將復選框轉換為映射它。您可以通過將索引傳遞給每個人來做同樣的事情。<input type="checkbox" onChange={() => buttonHandler(0}/>每個輸入的類似等等。

uj5u.com熱心網友回復：

將輸入元素包裝在父元素中，例如form或div。

保持狀態；一個包含每個框狀態（true或false）的陣列。當一個框被改變時，呼叫handleChange將更新狀態。

按鈕禁用屬性應該呼叫一個被呼叫的函式isDisabled，該函式將檢查every狀態中的框是否為false。如果是，則回傳 true（并禁用按鈕）。

const { useEffect, useState } = React;

function Example() {

  const [boxes, setBoxes] = useState([]);

  // In the text I suggested wrapping the inputs in
  // a parent element. This was so we could use the following
  // code to find its index within the list of inputs
  // without adding any more code to the JSX
  // Cribbed from https://stackoverflow.com/a/39395069/1377002
  function handleChange(e) {

    // Destructure the children from the parent of
    // the element that was changed (ie all the input elements)
    const { parentNode: { children } } = e.target;

    // Find the index of the box that was changed
    const index = [...children].indexOf(e.target);

    // Copy the state
    const newState = [...boxes];

    // Toggle the boolean at the index of
    // the `newState` array
    newState[index] = !newState[index];

    // Set the state with the updated array
    setBoxes(newState);
  }

  // If all boxes (elements) in state are false,
  // return true (disable the button)
  function isDisabled() {
    return boxes.every(box => !box);
  }

  return (
    <div className="App">
      <button disabled={isDisabled()}>Click Me</button>
      <form>
        <input type="checkbox" onChange={handleChange}/>
        <input type="checkbox" onChange={handleChange}/>
        <input type="checkbox" onChange={handleChange}/>
      </form>
    </div>
  );

}

ReactDOM.render(
  <Example />,
  document.getElementById('react')
);

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

附加檔案

• 解構賦值

• 傳播語法

標籤：javascript 反应

上一篇：為什么我不能這樣做：JavaScript/Typescript中的${someValue}？[復制]

下一篇：如何獲取多個同名鍵的JSON值