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

Question

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

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

我主要想做的是：

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

我正在使用 React 动态呈现复选框 + 大量数据和视觉效果，所以并不是所有的复选框都采用一种整洁的形式。

我尝试过各种 SO 线程，但大多数线程使用 jQuery 或在 onChange 函数（handleCheck()，在我的例子中）的 JS 中进行处理，这是已经太晚了，因为支票仍将适用（据我所知）。

编辑

这是一个基本设置的沙盒 link：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>
    );
}

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

Get "checked=true/false" value of checkbox from inside HTML attributes

html

javascript

checkbox

reactjs