更改按钮状态答案

【问题标题】：Change state of buttons更改按钮状态
【发布时间】：2019-08-17 11:40:15
【问题描述】：

条件渲染按钮不起作用

我尝试更改按钮的状态并添加另一个组件，但没有任何工作

    /// 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”

【问题讨论】：

欢迎来到 Stackoverflow，@Christian。是否有任何错误信息？不工作是什么意思？你会粘贴格式正确的代码吗？代码似乎无法在 prettier.io/playground 上格式化，因此人们无法确定是格式错误还是语法错误阻止了它工作。

标签： reactjs react-component

【解决方案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 或任何其他内容开始，从而取得更大的进步。

【讨论】：