改变按钮的状态

Question

条件渲染按钮不起作用

我尝试更改按钮的状态并添加另一个组件，但 none 成功了

    /// This is the button component


   const AddToList: React.FC<IAddToListProps> = (props) => {
   let [showBtn, setShowBtn] = useState(true);
     const classes = useStyles(props);
     let addToList = () => {
    fetch(`http://127.0.0.1:3000/${props.action}/${props.id}`, {method: 
 'post'})
         .then((response) => {
         console.log(response);
     });
   }
return (
  <div>
    {
      showBtn ?
      <Button
      onClick={addToList}
      variant="contained" 
      color="primary" 
      className={classes.button}>
        {props.label}
      </Button>
      : null
    }
</div>
    );



   //This is the movieCard component


   export default function MovieCard() {
const [movieTitle, setMovieTitle] = useState('lorem ipsum');
const [year, setYear] = useState('1999');

const classes = useStyles();

return (
    <Card className={classes.card}>
        <CardActionArea>
            <CardMedia
                className={classes.media}
                image='#'
                title="anotherTitle"
            />
            <CardContent>
                <Typography gutterBottom variant="h5" component="h2">
                    {movieTitle}
                </Typography>
                <Typography variant="body2" color="textSecondary" component="p">
                    {year}
                </Typography>
                <AddToList 
                id={10} 
                label={'Add To Watch'} 
                action={'towatch'}
                />
                <AddToList 
                id={10} 
                label={'Add To Seen'} 
                action={'watched'} />
            </CardContent>
        </CardActionArea>
        <CardActions>

        </CardActions>
    </Card>
);

预期结果：当我单击 "Add to Watch" 按钮时，必须删除 "Add to Seen" 并且必须将 "Add to Watch" 转换为 "Remove from watch list"

Answer 1

我会在逻辑和表示之间拆分代码。由于您已经重复使用 AddToList 它只是一个可视组件，不应包含任何逻辑。

所以我会将所有逻辑移动到一个组件，然后使用状态来呈现正确的表示：

const AddToList: React.FC<IAddToListProps> = props => {
  const classes = useStyles(props);
  return (
    <div>
        <Button
          onClick={props.onClick}
          variant="contained"
          color="primary"
          className={classes.button}
        >
          {props.label}
        </Button>
    </div>
  );
};

有了它，您可以提供单击按钮时调用的任何功能，并且您拥有一个可以在其他任何地方重复使用的多用途组件。因此，更通用的名称可能会有用。

export default function MovieCard() {
  const [movieTitle, setMovieTitle] = useState("lorem ipsum");
  const [year, setYear] = useState("1999");

  const [watched, setWatched] = useState(false);

  const classes = useStyles();

  const addToList = (action, id) => {
    fetch(`http://127.0.0.1:3000/${action}/${id}`, {
      method: "post"
    }).then(response => {
      console.log(response);
    });
  };

  return (
    <Card className={classes.card}>
      <CardActionArea>
        <CardMedia className={classes.media} image="#" title="anotherTitle" />
        <CardContent>
          <Typography gutterBottom variant="h5" component="h2">
            {movieTitle}
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
            {year}
          </Typography>
          {!watched && (
            <AddToList
              label={"Add To Watch"}
              onClick={() => { addToList("towatch", 10); setWatched(true)} }
            />
          )}
          {watched && (
            <AddToList
              label={"Add To Seen"}
              onClick={() => addToList("watched", 10)}
            />
          )}
        </CardContent>
      </CardActionArea>
      <CardActions />
    </Card>
  );
}

如您所见，MovieCard 现在正在处理调用后端函数的整个逻辑，并且还关心显示正确的按钮。有了这个基本的想法，你可以通过加载正确的 watched 状态而不是从 false 或任何其他东西开始。

改变按钮的状态

Change state of buttons

reactjs

react-component