我如何让 React.js 中的组件具有单独的行为？

Question

我正在实现一个喜欢和不喜欢按钮，我希望当我点击它们时它们会带有其他颜色，但只有被点击的组件，当我点击所有按钮时改变状态，有人可以帮助我吗？

`

const indexPost = async () => {
        const data = await api.get('/api/posts')
        if(data.data.length !=0){
            const dataArray = data.data
            if(dataArray.length === 0) {
                return
            }else{
                return(
                    setPost(dataArray.map( data => (
                        <Post key={data._id} id={data._id} title={data.title} text={data.text}>
                            <Like id={data._id}></Like>
                        </Post>
                        
                    )))
               )
         }
     }
           
} 




export default function Like({itemId}) {
    const context = useContext(notificationContext)
    const {isLoved, Like, Loved, Unlike, isLike, isUnlike, setIsLike, setIsUnlike, setIsLoved } = context
    return(
                <div className={styles.likeContainer} key={itemId}>
                            {isLike ? (
                            <button className={styles.likeContent} onClick={() => setIsLike(false)}><Icon.ThumbsUp className={styles.Icon} fill="#5CB0BB" ></Icon.ThumbsUp></button>) : 
                            (<button className={styles.likeContent} onClick={() => Like() }><Icon.ThumbsUp className={styles.Icon}  ></Icon.ThumbsUp></button>)}
                            {isLoved ? 
                            (<button className={styles.likeContent} onClick={() => setIsLoved(false)}><Icon.Heart className={styles.Icon}   fill="red" ></Icon.Heart> </button>) : 
                            (<button className={styles.likeContent} onClick={() => Loved() }><Icon.Heart className={styles.Icon}  ></Icon.Heart></button>)}
                            {isUnlike ? (
                            <button className={styles.likeContent} onClick={() => setIsUnlike(false)}><Icon.ThumbsDown className={styles.Icon}  fill="#702BA6"  ></Icon.ThumbsDown> </button>) : 
                            (<button className={styles.likeContent} onClick={() => Unlike()}><Icon.ThumbsDown className={styles.Icon}  ></Icon.ThumbsDown></button>
                            )}
                     </div>                
    )
};

Answer 1

您可以在每个点赞按钮上使用 onClick() 并为其附加一个函数，然后您可以使用 e.currentTarget.id 获取特定点赞的值并按您想要的方式更改其 css/style .

const handleClick=(e)=>
    {
    console.log(e.currentTarget.id);
    }

Answer 2

我在我的项目中实现了类似的，它非常基础，它展示了如何更新点赞，你需要处理用户身份验证等情况

App.js

import { useState, useEffect, createContext, useReducer } from "react";
import { updateArrayOfObj } from "./utils";
import AllPosts from "./AllPosts";
export const PostsContext = createContext();

const initialState = {
  posts: [
    {
      _id: "1",
      name: "Browny",
      image: "http://placekitten.com/200/310",
      likes: 0,
      love: 0,
      dislikes: 0
    },
    {
      _id: "2",
      name: "Blacky",
      image: "http://placekitten.com/200/320",
      likes: 0,
      love: 0,
      dislikes: 0
    },
    {
      _id: "3",
      name: "SnowWhite",
      image: "http://placekitten.com/200/300",
      likes: 0,
      love: 0,
      dislikes: 0
    }
  ]
};

const reducer = (state, action) => {
  switch (action.type) {
    case "UPDATE_POST":
      return {
        ...state,
        posts: updateArrayOfObj(
          state.posts,
          action.payload.obj,
          "_id",
          action.payload._id
        )
      };
    case "CREATE_POST":
      return {
        ...state,
        posts: [...state.posts, ...action.payload.data]
      };
    case "DELETE_POST":
      return {
        ...state,
        posts: state.posts.filter((ele) => ele._id !== action.payload._id)
      };
    default:
      return state;
  }
};
export default function App() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <PostsContext.Provider
      value={{
        state,
        dispatch
      }}
    >
      <div className="App">
        <AllPosts />
      </div>
    </PostsContext.Provider>
  );
}

PostsAll.js


import Post from "./Post";
import { PostsContext } from "./App";
import { useContext } from "react";

export default function AllPosts() {
  const { state } = useContext(PostsContext);
  return (
    <div className="allPosts">
      {state.posts.map((item) => {
        return (
          <Post
            name={item.name}
            image={item.image}
            likes={item.likes}
            love={item.love}
            dislikes={item.dislikes}
            id={item._id}
            key={item._id}
          />
        );
      })}
    </div>
  );
}

Post.js


import { PostsContext } from "./App";
import { useContext } from "react";

export default function Post(props) {
  const { state, dispatch } = useContext(PostsContext);
  const handleUserInteraction = (type, id) => {
    dispatch({
      type: "UPDATE_POST",
      payload: {
        obj: { [type]: props[type] + 1 },
        _id: id
      }
    });
  };
  return (
    <div className="post">
      <h3>{props.name}</h3>
      <img src={props.image} alt="cat" />
      <br />
      <button onClick={() => handleUserInteraction("likes", props.id)}>
        {props.likes} Like
      </button>{" "}
      <button onClick={() => handleUserInteraction("love", props.id)}>
        {props.love} Love
      </button>{" "}
      <button onClick={() => handleUserInteraction("dislikes", props.id)}>
        {props.dislikes} Dislike
      </button>
    </div>
  );
}

你可以参考这个codesandbox来实现同样的

我如何让 React.js 中的组件具有单独的行为？

How i can do my component in React.js have a individual behavior?

html

css

web

reactjs

react-fullstack