javascript - 在 React 中删除一个 onClick

Question

我想通过单击单个卡片上的 X 图标来删除搜索结果。

搜索从 API 返回 10 个菜谱，生成 10 个 div。我将如何在保留其他 div 的同时删除图标的 onClick 单个 div ？本质上只是一个删除搜索结果按钮。

return (
    <div className='App'>
      <form onSubmit={getSearch} className="search-form">
        <InputGroup>
          <InputGroupAddon addonType="prepend">
            <InputGroupText><FontAwesomeIcon icon={faSearch} /></InputGroupText>
          </InputGroupAddon>
          <Input className="search-bar" type="text" placeholder="Search for recipe..." value={search} onChange={updateSearch} />
        </InputGroup>
        <Button color="primary" size="sm" className="search-button" type="submit">Search</Button>
      </form>
      <div className="recipes">
        {recipes.map(recipe => (
          <Recipe
            key={recipe.recipe.label}
            title={recipe.recipe.label}
            theUrl={recipe.recipe.url}
            image={recipe.recipe.image}
            ingredients={recipe.recipe.ingredients}
            source={recipe.recipe.source}
            healthLabels={recipe.recipe.healthLabels}
            servings={recipe.recipe.yield} />
        ))}
      </div>
    </div>

const Recipe = ({ title, theUrl, image, ingredients, source, healthLabels, servings }) => {
    return (
        <div className={style.recipe}>
            <FontAwesomeIcon className={style.delete} icon={faTimes} />
            <h3 >{title}</h3>
            <Badge className={style.badge} color="primary">{source}</Badge>
            <p>Serves: <Badge color="primary" pill>{servings}</Badge></p>
            <img src={image} alt='food' />
            <ol className={style.allergens}>
                {healthLabels.map(healthLabel => (
                    <li>{healthLabel}</li>
                ))}
            </ol>
            <div className={style.ingr}>
                <ol>
                    {ingredients.map(ingredient => (
                        <li>{ingredient.text}</li>
                    ))}
                </ol>
                <Button className={style.button} outline color="primary" size="sm" href={theUrl} target="_blank">Method</Button>
            </div>
            <div className={style.info}>
                <div className={style.share}>
                    <WhatsappShareButton url={theUrl}><WhatsappIcon round={true} size={20} /></WhatsappShareButton>
                    <FacebookShareButton url={theUrl}><FacebookIcon round={true} size={20} /></FacebookShareButton>
                    <EmailShareButton url={theUrl}><EmailIcon round={true} size={20} /></EmailShareButton>
                </div>
            </div>
        </div>

    );
}

Answer 1

只需更新 recipes array 和 React 将更新 HTML。

我不知道在哪里recipes来自，但如果你设置 onClick比如说，<Recipe label="x">从 recipes 中删除相应的配方元素，那么 React 不应再渲染该配方。