从 HTML 属性中获取复选框的“checked=true/false”值

Question

我想根据两个变量启用和禁用复选框：1）是否已经检查了 2+，2）当前复选框是启用还是禁用。即我有一个项目列表，我想限制用户只能从（可能）无穷无尽的选项中选择两个。

我有一个handleCheck() 函数，但我认为在应用该函数时，控制复选框的checked 值已经太晚了，对吧？因为我可以在用户选中他们的第三个框后成功调用alert()，但是无论如何都会出现检查；我无法阻止它被检查。这就是我想将控件放在 HTML 中的原因：如果计数超过两个并且用户没有选择此复选框，则该复选框将被禁用。为了选择这个复选框，他们必须取消选择另一个。

我真正想做的是：

disabled={count >= 2 && thisCheckbox.checked === false}

我正在使用 React 来动态渲染复选框 + 一个完整的数据负载和视觉效果，所以并不是所有的复选框都在一个简洁的形式中。

我已经尝试过各种 SO 线程，但它们中的大多数使用 jQuery 或在 onChange 函数（在我的情况下为 handleCheck()）中的 JS 中进行处理，这已经太晚了，因为仍然会应用检查（据我所知）。

编辑

这是基本设置的沙盒链接：https://codesandbox.io/s/nameless-sun-3jsmn?file=/src/TestimonialsSettingsUnit.js

Answer 1

我已经解决了这个问题，你可以在这里参考工作代码 - https://codesandbox.io/s/focused-tereshkova-f95jj?file=/src/App.js

import "./styles.css";

import React, { useState, useEffect } from "react";

import TestimonialsSettingsUnit from "./TestimonialsSettingsUnit.js";

const data = [
  {
    name: "Test1",
    id: 1,
    otherData: "This is a testimonial about Test1",
    show: true
  },
  {
    name: "Test2",
    id: 2,
    otherData: "This is a testimonial about Test2",
    show: true
  },
  {
    name: "Test3",
    id: 3,
    otherData: "This is a testimonial about Test3",
    show: false
  }
];

const App = () => {
  const [selectedTestimonials, setSelectedTestimonials] = useState([]);
  const [testimonials, setTestimonials] = useState(data);

  useEffect(() => {
    const selectedTestimonials = testimonials
      .filter(({ show }) => show)
      .map(({ id }) => id);
    setSelectedTestimonials(selectedTestimonials);
  }, [testimonials]);

  const handleCheckboxChange = (testimonialId, show) => {
    const updatedTestimonials = testimonials.map((testimonial) => {
      if (testimonial.id === testimonialId) {
        return {
          ...testimonial,
          show
        };
      }
      return testimonial;
    });
    setTestimonials(updatedTestimonials);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      {data.map((testimonial, i) => {
        const isSelected = selectedTestimonials.includes(testimonial.id);
        const isDisabled = !isSelected && selectedTestimonials.length === 2;
        return (
          <TestimonialsSettingsUnit
            key={testimonial.id}
            index={i}
            data={testimonial}
            handleCheckboxChange={handleCheckboxChange}
            isSelected={isSelected}
            isDisabled={isDisabled}
          />
        );
      })}
    </div>
  );
};

export default App;

import React from "react";

export default function TestimonialsSettingsUnit({
    data,
    index,
    handleCheckboxChange,
    isSelected,
    isDisabled
}) {
    const handleCheck = (event) => {
        const { target: { checked } } = event
        handleCheckboxChange(data.id, checked)
    };

    return (
        <div className="settings-testimonials-container">
            <h4>Testimonial {index + 1}</h4>
            <div className="settings-testimonial-controls">
                <img
                    className="settings-profile-img"
                    src={data.authorPhoto}
                    alt="User"
                />
                <div className="settings-testimonial-info">
                    <div>
                        <p>Name</p>
                        <h5>{data.authorName}</h5>
                    </div>
                    <div>
                        <p>Company</p>
                        <h5>{data.authorCompany}</h5>
                    </div>
                    <div>
                        <p>Position</p>
                        <h5>{data.authorTitle}</h5>
                    </div>
                </div>
                <div className="settings-testimonial-buttons">
                    <button>Delete</button>
                    <br />
                    <input
                        id="show"
                        type="checkbox"
                        name={`testimonial-${index + 1}`}
                        checked={isSelected}
                        onChange={handleCheck}
                        disabled={isDisabled}
                    />
                    <label htmlFor="show">Show on profile</label>
                </div>
            </div>
            <p>Text</p>
            <p>{data.text}</p>
            <hr style={{ border: "solid 1px purple" }} />
        </div>
    );
}