提交表单时未取消选中来自复选框

Question

我目前正在做一个 ReactJS 项目。 我有一个表单，应该 console.log 将表单字段 onSubmit 作为对象。 在那种形式中，我有几个复选框（由 RestAPI 从数据库中提取并由其他反应组件呈现）。

提交后，复选框未被取消选中。 我的问题是，当我手动取消选中它们时，它会将未选中的数据添加到数据对象中。

如何不手动取消选中提交上的复选框？

这是页面代码：

import React, { useState, useEffect } from 'react';
import FCIngredient from '../FunctionalComps/FCIngredient';
import { useNavigate } from 'react-router-dom';
import $ from 'jquery';

const apiUrl = 'https://somelocalhost/'

export default function NewRecipePage() {
    const navigate = useNavigate();
    const [ingredients, setIngredients] = useState([])
    const [recipeIngredients, setRecipeIngredients] = useState([])

    const addIngredientToRecipe = (ingredientObject) => {
        let tmpIngArr =[...recipeIngredients,ingredientObject];
        setRecipeIngredients([...tmpIngArr])
        tmpIngArr = [];
    }
    const Go2Home = () => {
        navigate('/');
    }
    const NewRecipeSubmited = (event) => {
        //$(".checkClass").attr("checked", false);//didn't work

        const recipeObject = {
            Name: event.target.recName.value,
            ImageUrl: event.target.recUrl.value,
            CoockingMethod: event.target.recMethod.value,
            CoockingTime:event.target.recTime.value
        }
        console.log('recipeObject: ',recipeObject);
        console.log('recipeIngredients: ',recipeIngredients);
        let cleaningArr = [];
        setRecipeIngredients(cleaningArr);
        event.preventDefault();

    }
  
    useEffect(() => {
        fetch(apiUrl, {
            method: 'GET',
            headers: new Headers({
                'Content-Type': 'application/json; charset=UTF-8',
                'Accept': 'application/json; charset=UTF-8'
            })
        })
            .then(res => {
                return res.json()
            })
            .then(
                (result) => {
                    setIngredients(result)
                    console.log(ingredients);
                },
                (error) => {
                });
    },[])


    return (
        <div style={{ color: 'white', width: '100%' }}>
            <h1>New Recipe</h1>
            <button onClick={Go2Home} >Back Home</button> <br />

            <form onSubmit={NewRecipeSubmited}>
                <input name="recName" type="text" placeholder='Recipe Name' /><br />
                <input name="recMethod" type="text" placeholder='Cooking Method' /><br />
                <input name="recTime" type="text" placeholder='Cooking Time' /><br />
                <input name="recUrl" type="url" placeholder='Recipe imageURL' /><br />
                <p>Please choose the ingredients for your recipe!</p>
                <div style={{ display: 'flex' }}>
                    {ingredients.map((ing) =>
                        <div>
                            <input type="checkbox" className='checkClass' onChange={() => {addIngredientToRecipe(ing)}} id={ing.IngredientId}/>
                            <FCIngredient ingredient={ing} key={ing.IngredientId} /></div>)}
                </div>
                <button type="submit">Add your new recipe!</button>

            </form>
        </div>
    )
}

Answer 1

是的，代码几乎是正确的。以下是所需的更改：

1. 您只需在每个成分对象中添加一个布尔字段 isChecked。
2. 在 addIngredientToReceipe() 方法中切换所选成分对象的 isChecked 字段
3. 在NewRecipeSubmitted 函数中，将每个成分对象的isChecked 设置为false，然后使用修改后的数组调用setIngredients()

检查内联 cmets 以遵循该方法：

import React, { useState, useEffect } from 'react';
import FCIngredient from '../FunctionalComps/FCIngredient';
import { useNavigate } from 'react-router-dom';

const apiUrl = 'https://somelocalhost/'

export default function NewRecipePage() {
    const navigate = useNavigate();
    const [ingredients, setIngredients] = useState([])
    const [recipeIngredients, setRecipeIngredients] = useState([])

    const addIngredientToRecipe = (ingredientObject) => {
        let tmpIngArr =[...recipeIngredients,ingredientObject];
        setRecipeIngredients([...tmpIngArr])
        // 3. Find the ingredient in the array and toggle the checked status
        let newIngredients = [...ingredients];
        for (let i = 0; i < newIngredients.length; i++) {
            if (newIngredients[i].IngredientId === ingredientObject.IngredientId) {
                newIngredients[i].isChecked = !newIngredients[i].isChecked;
                break;
            }
        }
        // 4. Update ingredients' state
        setIngredients(newIngredients);
        tmpIngArr = [];
    }
    const Go2Home = () => {
        navigate('/');
    }
    const NewRecipeSubmited = (event) => {
        const recipeObject = {
            Name: event.target.recName.value,
            ImageUrl: event.target.recUrl.value,
            CoockingMethod: event.target.recMethod.value,
            CoockingTime:event.target.recTime.value
        }
        console.log('recipeObject: ',recipeObject);
        console.log('recipeIngredients: ',recipeIngredients);
        let cleaningArr = [];
        setRecipeIngredients(cleaningArr);
        // 5. Loop through each ingredients and set the isChecked to false
        let newIngredients = [...ingredients];
        for (let i = 0; i < newIngredients.length; i++) {
            newIngredients[i].isChecked = false;
        }
        // 6. Update ingredients' state
        setIngredients(newIngredients);
        event.preventDefault();

    }
  
    useEffect(() => {
        fetch(apiUrl, {
            method: 'GET',
            headers: new Headers({
                'Content-Type': 'application/json; charset=UTF-8',
                'Accept': 'application/json; charset=UTF-8'
            })
        })
            .then(res => {
                return res.json()
            })
            .then(
                (result) => {
                    // 1. Note the new field `isChecked` here
                    setIngredients(result.map(i => ({...i, isChecked: false})))
                    console.log(ingredients);
                },
                (error) => {
                });
    },[])


    return (
        <div style={{ color: 'white', width: '100%' }}>
            <h1>New Recipe</h1>
            <button onClick={Go2Home} >Back Home</button> <br />

            <form onSubmit={NewRecipeSubmited}>
                <input name="recName" type="text" placeholder='Recipe Name' /><br />
                <input name="recMethod" type="text" placeholder='Cooking Method' /><br />
                <input name="recTime" type="text" placeholder='Cooking Time' /><br />
                <input name="recUrl" type="url" placeholder='Recipe imageURL' /><br />
                <p>Please choose the ingredients for your recipe!</p>
                <div style={{ display: 'flex' }}>
                    {ingredients.map((ing) =>
                        <div>
                            {/* 2. Note the controlled checkbox here */}
                            <input type="checkbox" className='checkClass' checked={ing.isChecked} onChange={() => {addIngredientToRecipe(ing)}} id={ing.IngredientId}/>
                            <FCIngredient ingredient={ing} key={ing.IngredientId} /></div>)}
                </div>
                <button type="submit">Add your new recipe!</button>

            </form>
        </div>
    )
}

Answer 2

@Borni.Mr 帮助我弄清楚了这一点： 通过给每个复选框一个“checked”属性，jQuery.att.checked 现在可以工作了：

原代码：

<input type="checkbox" className='checkClass' onChange={() => {addIngredientToRecipe(ing)}} id={ing.IngredientId}/>

固定代码：

<input type="checkbox" className='checkClass' checked={recipeIngredients.some((el) => el === ing)} onChange={() => {addIngredientToRecipe(ing)}} id={ing.IngredientId}/>