Question

我需要在onClick之后的时间元素中设置一个true的prop isSelect，这是最好的方法？我可以为此属性创建一个状态，但是我有几个按钮如何进行？

const range = [7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];

export default function Schedules() {
  const [date, setDate] = useState(new Date());
  const [hours, setHours] = useState([]);
  const [hoursSelected, setHoursSelected] = useState([]);

  const profile = useSelector(state => state.user.profile);

  useEffect(() => {
    async function loadAvailable() {
      const response = await api.get(`providers/${profile.id}/available`, {
        params: {
          date: date.getTime(),
        },
      });

      setHours(response.data);
    }

    loadAvailable();
  }, [date]);

  function handleSelectHour(time) {
    setHoursSelected([...hoursSelected, time.time.time]);
  }


  return (
    <Container>
      <ul>
        {hours.map(time => (
          <Time
            key={time.time}
            id={time.time}
            onClick={() => handleSelectHour({ time })}
            available={!time.available}
            isSelected={false}
          >
            <strong> {time.time} </strong>
            <span>{time.available ? 'Select' : ''}</span>
          </Time>
        ))}
      </ul>
    </Container>
  );
}

Answer 1

在我当前的解决方案中，我会做出很多假设，因为我认为您的问题不太清楚。但是，如果任何假设不正确，您仍然可以联系假设： 1. isSelect是计划中清除的状态值

import pandas as pd
import numpy as np

from sklearn.feature_extraction.text import CountVectorizer
from sklearn.metrics.pairwise import cosine_similarity
df = pd.read_csv("movies.csv")


def get_title_from_index(index):
    return df[df.index == index]["title"].values[0]
def get_index_from_title(title):
    return df[df.title == title]["index"].values[0]
def get_poster_from_index(index):
    return df[df.index == index]["poster"].values[0]

def combine_features(row):
        return row["keywords"]+"" +row["cast"]+""+row["genres"]+""+row["director"]
def similar_movies(movie_input):
    features = ['keywords','cast','genres','director']
    df["poster"] = df["poster"].fillna("")
    for feature in features:
        df[feature] = df[feature].fillna("") #filling all NaNs with blank string
    df["combined_features"] = df.apply(combine_features,axis=1)
    cv = CountVectorizer() #creating new CountVectorizer() object
    count_matrix = cv.fit_transform(df["combined_features"])
    cosine_sim = cosine_similarity(count_matrix)
    movie_index = get_index_from_title(movie_input)
    similar_movies = list(enumerate(cosine_sim[movie_index])) 
    sorted_similar_movies = sorted(similar_movies,key=lambda x:x[1],reverse=True)[1:]

    return sorted_similar_movies

这样，您已经传递了isSelect的值以及将其值export default function Schedules(){ ... const [isSelect, setIsSelect] = useState(false) <Time key={time.time} id={time.time} onClick={() => { // handleSelectHour({ time }) setIsSelect(!isSelect) }} available={!time.available} isSelect={isSelect} setIsSelect={SetIsSelect} > <strong> {time.time} </ <span>{time.available ? 'Select' : ''}</span> </Time> }更改为Time的props值的功能。在“时间”中，可以在发出onClick事件之后设置isSelect的值。

但是，我仍然认为这不能解决所有问题，因为setIsSelect在{Time}内是handleSelectHour，因此您可能还需要将其作为道具传递。

也许我的假设是错误的

Answer 2

如果TIME是单个元素，那么您的解决方案将是正确的，但是时间会被映射遍历，因此我需要为每个持久存在的元素提供一个状态

 {hours.map(time => (
          <Time
            key={time.time}
            id={time.time}
            onClick={() => {
              setIsSelect(!isSelect);
              handleSelectHour({ time });
            }}
            available={!time.available}
            isSelected={isSelect}
            isSelect={isSelect}
          >
            <strong> {time.time} </strong>
            <span>{time.available ? 'Selecionar' : ''}</span>
          </Time>
        ))}

设置prop元素在onclick之后可见

2 个答案: