如何获取使用Javascript检查的所有复选框ID？

Question

我正在开发一个名为“ Food Recipes”]的项目，用户可以在其中创建，编辑，删除自己的食谱。

创建新食谱时，用户必须选择成分。所以这是我需要您帮助的地方：

通过axios电话，我正在获取所有成分并将它们显示在表中。该表如下所示：

|---------------------|------------------|-----------------|
|      Ingredient     |    Check         |     Amount      |
|---------------------|------------------|-----------------|
|      Tomato         |     true         |      2 kg       |
|---------------------|------------------|-----------------|
|      Potato         |     false        |                 |
|---------------------|------------------|-----------------|
|      Onion          |     true         |      1 kg       |
|---------------------|------------------|-----------------|
[将某些成分检查为TRUE之后，我想拥有onChange函数，该功能将从所有经过检查的成分中创建ID列表（在这种情况下，我将具有两个元素的列表：Tomato的ID和Onion的ID） 

要提一下，我将成分ID作为值放入[] <input type="checkbox"/>

这是我的代码：

import React, {Component, useEffect, useState} from 'react'
import axios from "../../../axios/axios"

class Ingredient extends Component {
    constructor(props){
        super(props)
        this.state = {
            ingredients: [],
            ingedientsList: [],
            isChecked: false,
        }
    }
    onIngredientChange = (e) => {
          //HERE
    };

    componentDidMount() {
        axios.get("/ingredients").then((data) => {
            const ingredients = Object.keys(data.data).map((ingredient, index) => {
                return (
                    <tr key={index}>
                        <td scope="col">
                            <label>{data.data[index].name}</label>
                        </td>
                        <td scope="col">
                            <input
                                id={data.data[index].id}
                                key={index}
                                type="checkbox"
                                name={"newIngredients"}
                                value={data.data[index].id}
                                onChange={this.onIngredientChange}

                            />
                        </td>
                        <td scope="col">
                            <input
                                id={data.data[index].id + "amount"}
                                key={index}
                                type="number"
                                min="0"
                                max="500"
                                name="amount"
                                placeholder="grams"
                                onChange={this.onIngredientChange}
                            />
                        </td>
                    </tr>
                );
            });
            this.setState({ingredients: ingredients});
        });
    }
    render() {
        return (
            <div className="form-group">
                <table className="table tr-history table-striped small">
                    <thead>
                    <tr>
                        <th scope="col">
                            <h5>Ingredient</h5>
                        </th>
                        <th scope="col">
                            <h5>Check</h5>
                        </th>
                        <th scope="col">
                            <h5>Amount</h5>
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    {this.state.ingredients}
                    </tbody>
                </table>
            </div>
        )
    }
}
export default Ingredient;
我正在开发一个名为“食品食谱”的项目，用户可以在其中创建，编辑，删除自己的食谱。创建新配方时，用户必须选择成分。所以这是我需要您的地方...

Answer 1

尝试一下。使用状态数组而不是简单数组。

onIngredientChange = (e, value) => {
         if (array.includes(value) && !e.target.checked) {
           array.splice( array.indexOf(value), 1 );
         } else if (!array.includes(value) && e.target.checked) {
           array.push(value)
         }
    };

<input id={data.data[index].id} key={index}
    type="checkbox" name={"newIngredients"}
     value={data.data[index].id}
     onChange={(e) =>this.onIngredientChange(e, value)} />

Answer 2

...
onIngredientChange = e => {
  const checkedIngrediants = {
    ...this.state.checkedIngrediants
    [e.target.id]: !e.target.value
  };
  this.setState({
    checkedIngredients,
    ingredientsList: Object.keys(checkedIngredients)
      .filter(key => checkedIngredients[key])
  })
}
...
<input
  id={data.data[index].id}
  key={index}
  type="checkbox"
  name={"newIngredients"}
  value={this.state.checkedIngrediants[data.data[index].id]}
  onChange={this.onIngredientChange} />

Answer 3

更新