如何在React.js中从表单提交中获取ckeckbox元素的值

Question

由于某些原因，当我提交表单时，我无法获得复选框的值我指的不是复选值，而是HTML元素本身的值属性。

这是我在父组件中的元素：

function parent(props){
  const [filterCriteria, setFilterCriteria] = useState([]);
  const [companies, setCompanies] = useState([]);
  const [categories, setCategories] = useState([]);
useEffect(() => {
    axios
      .get("http://localhost:4000/api/companies")
      .then((res) => {
        companiesData = res.data.companies;
        setCompanies([...new Set(companiesData.map((item) => item.company))]);
      })
      .finally(() => {
        setIslLoading(false);
      });
  }, []);
  useEffect(() => {
    axios
      .get("http://localhost:4000/api/categories")
      .then((res) => {
        categoriesData = res.data.categories;
        setCategories([
          ...new Set(categoriesData.map((item) => item.category)),
        ]);
      })
      .finally(() => {
        setIslLoading(false);
      });
  }, []);

const onFilteringHandler = (e) => {
    e.preventDefault();
     //fun fact the e.target is looped useing "for of" not "for in" although it's an 
       object
    for (const element of e.target) {
      if (element.type === "checkbox" && 
element.checked === true &&
companies.includes(element.value)) {
        setFilterCriteria([...filterCriteria, element.value]);
      }
      if (element.type === "checkbox" && 
element.checked === true &&
categories.includes(element.value)) {
         setFilterCriteria([...filterCriteria, element.value]);
      }
    }
  };

return (
              //this element is in the medal of tother elements but for simplification i 
               removed them
             <FilterBox
            categoriesCriteria={categories}
            settingFilterCriteria={onFilteringHandler}
            companiesCriteria={companies}
             />
)
}

这是我在孩子身上的元素；FilterBox"；组件：

function FilterBox(props) {
       // this is to map the categories into check boxes with values, keys and label
  let categoriesFilters = props.categoriesCriteria.map((category, index) => {
    return (
      <label key={index}>
        {category}
          //this is the value i'm tring to get in the form submition
        <input type="checkbox" value={category} />
      </label>
    );
  });
       // this is to map the categories into check boxes with values, keys and label
  let companiesFilters = props.companiesCriteria.map((company, index) => {
    return (
      <label key={index}>
        {company}
          //this is the value i'm tring to get in the form submition
        <input type="checkbox" value={company} />
      </label>
    );
  });
  return (
    <form
      onSubmit={props.settingFilterCriteria}
      className="product_creation_form"
    >
      <div>
        <h5 className="filter_title">Categories</h5>
        {categoriesFilters}
      </div>
      <div>
        <h5 className="filter_title">Companies</h5>
        {companiesFilters}
      </div>
      <button type="submit" className="form_button">
        Apply
      </button>
      <button type="reset" className="form_button">
        Clear All
      </button>
    </form>
  );
}

没有什么问题，我无法获得这行中的值：

setFilterCriteria([...filterCriteria, element.value]);

尽管e.target上存在element.value？

如何做到这一点？

Answer 1

FilterBox组件

function FilterBox(props) {
  const categoriesFilters = props.categoriesCriteria.map((category, index) => {
    return (
      <label key={index}>
        {category}
        <input type="checkbox" value={category} name={category} />
      </label>
    );
  });
  const companiesFilters = props.companiesCriteria.map((company, index) => {
    return (
      <label key={index}>
        {company}
        <input type="checkbox" value={company} name={company} />
      </label>
    );
  });
  return (
    <form
      onSubmit={props.settingFilterCriteria}
      className="product_creation_form"
    >
      <div>
        <h5 className="filter_title">Categories</h5>
        {categoriesFilters}
      </div>
      <div>
        <h5 className="filter_title">Companies</h5>
        {companiesFilters}
      </div>
      <button type="submit" className="form_button">
        Apply
      </button>
      <button type="reset" className="form_button">
        Clear All
      </button>
    </form>
  );
}

应用程序组件：

function App() {
  const [companies] = React.useState(["companyOne", "companyTwo"]);
  const [categories] = React.useState(["categoryOne", "categoryTwo"]);
  const onFilteringHandler = (e) => {
    e.preventDefault();
    const filterCriteria = { companies: [], categories: [] };
    for (const element of e.target) {
      if (element.type === "checkbox" && element.checked) {
        if (companies.includes(element.value)) {
          filterCriteria.companies.push(element.name);
        }
        if (categories.includes(element.value)) {
          filterCriteria.categories.push(element.name);
        }
      }
    }
    console.log(filterCriteria);
  };
  return (
    <FilterBox
      categoriesCriteria={categories}
      settingFilterCriteria={onFilteringHandler}
      companiesCriteria={companies}
    />
  );
}

我自由地断开了CCD_ 1&CCD_ 2对状态数组进行反应并对其进行硬编码以简化操作。下面的代码应该足以发送有意义的数据，以便能够在后端过滤掉。

我采用了非受控形式状态的方法，因为您的代码似乎支持这种方法。您也可以尝试将过滤器值保持在react状态，但我认为这会使解决方案变得有点复杂(尤其是状态更新是异步的(，而且似乎只需要在按下按钮时收集当前过滤器状态值。但是，如果您出于其他目的需要它，那么很可能需要一个受控的表单状态。