如何从 React.js 中的表单提交中获取复选框元素的值？

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]);

尽管 element.value 存在于 e.target?

怎么做？

Answer 1

过滤框组件

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}
    />
  );
}

我冒昧地断开了 companies 和 categories 反应状态数组的初始 API 加载，并为简单起见对它们进行了硬编码。下面的代码应该足以发送有意义的数据，以便能够在后端过滤掉。

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

如何从 React.js 中的表单提交中获取复选框元素的值？

How to get the value of ckeckbox element from a form submission in React.js?

javascript

dom-events

reactjs