功能组件，reactJS。我在 div 内的 span 旁边有一个按钮。我希望按钮以跨度为目标，因此我可以在单击时删除跨度

Question

基本上，我是在询问我在标题中输入的内容。我有一个相邻的跨度和按钮，并且 onclick 我希望该按钮能够隐藏跨度或将其从状态中完全删除。 This is what the page looks like with the button next to the span (UPDATED) 这是我的代码

import React, {useState} from "react";
import { NavLink } from "react-router-dom";
import {Button} from "react-bootstrap";

const SavedStrain = (props) => {
  console.log(props.savedList);

  const editResponse = () => {

  }

  const removeResponse = () => {
    const removeFromSavedList = props.removeFromSavedList;
    //removeFromSavedList()
  }

  console.log(props)


  return (
    <div className="saved-list">
      <h3> Saved Strains: </h3>

      {props.savedList.map(strain => (
        <div>
          <NavLink to={`/strains/${strain}`}>
            <span className='name'> {strain} </span>
          </NavLink>
          <Button className='delete' onClick={removeResponse}>Delete</Button>
        </div>
      ))}
      
    </div>
  )
}
 
export default SavedStrain;

Here is my props (UPDATED)

这是我的组件 removeFromSavedList 所在的位置。

import React, {useEffect, useState} from 'react';
import { Route, Link } from 'react-router-dom';
import axios from 'axios';
import UserCreation from './components/UserCreation';
import Login from "./components/Login";
import StrainCard from './components/StrainCard';
import { Container } from "reactstrap";
import NavBarComponent from "./components/NavBarComponent";
import SavedStrain from './components/SavedStrain';
import Strain from './components/Strain';
import StrainDetails from './components/StrainDetails';

function App(props) {
  const [strains, setStrains] = useState([]);
  const [strain, setStrain] = useState([]);
  const [savedList, setSavedList] = useState([]);
  
  useEffect(() => {
    const getStrains = () => {
      axios
        .get('http://strainapi.evanbusse.com/CEIl7eN/strains/search/all')
        .then(response => {
          setStrains(response.data);
        })
        .catch(error => {
          console.error('Server Error', error.response);
        });
    }
    getStrains();
  }, []);


console.log(strains)

  useEffect(() => {
    setStrain(Object.keys(strains).slice(0, 20))
  }, [strains])

  const addToSavedList = strain => {
    setSavedList([...savedList, strain]);
    console.log(savedList);
  };

  const removeFromSavedList = (strain) => {
    setSavedList(savedList.filter(element => element !== strain))
  }

  const editSavedStrain = (event) => {
    event.preventDefault();
    setSavedList(strain === event.target.value)
  }

  return (
    <Container className="App">
        <NavBarComponent />
      <Route exact path='/'>
        <Link to='/login'>Log in</Link>
      </Route>
        <Route exact path='/login'>
            <Login />
        </Route>
      <Route exact path='/signup'>
        <UserCreation />
      </Route>
      <Route exact path='/strains' render= { () => <StrainCard strains={strains} />} />
      <Route exact path='/strains/:strain' render = {(props) => <StrainDetails {...props} strains={strains} addToSavedList={addToSavedList} savedList={savedList} />} />
      <Route exact path='/savedstrains' render = {(props) => <SavedStrain {...props} savedList={savedList} removeFromSavedList={removeFromSavedList} editSavedStrain={editSavedStrain} /> } />
    </Container>
  );
}

export default App;

Answer 1

您需要使用从地图中获得的应变调用removeFromSavedList 处理程序。

<Button className='delete' onClick={() => props.removeFromSavedList(strain)}>Delete</Button>

请注意，这会替换 SavedStrain 中的 removeResponse，您可以将其删除。