Question

我有一个我正在制作的应用。我们的想法是根据您点击的内容将状态设置为不同的内容。在这种情况下，状态是图像src变量。我现在有这个......

   merryWeather = () => {
      this.setState({
         imgPath: merrys
      })
   }

   maxJPegasus = () => {
      this.setState({
         imgPath: pega
      })
   }

   betterCallLamar = () => {
      this.setState({
         imgPath: lamars
      })
   }

   betterCallLester = () => {
      this.setState({
         imgPath: lesters
      })
   }

以及其他一些状态设置功能。如何将这些作为一个函数编写，并反复调用相同的函数？

Answer 1

创建单个函数并将参数传递给imgPath。

setImgPath = (imgPath) => {
  this.setState({imgPath});
}

Answer 2

您可以创建一个updateState函数，该函数接受name和value或为您更新imgPath的函数。

updateState = (name, value) => {
    this.setState({
        [name]: value
    });
}
merryWeahter = () => {
    this.updateState('imgPath', merrys);
}
maxJPegasus = () => {
    this.updateState('imgPath', pega);
}

OR

updateImgPath = value => {
    this.setState({
        imgPath: value
    });
}
merryWeahter = () => {
    this.updateImgPath(merrys);
}
maxJPegasus = () => {
    this.updateImgPath(pega);
}

使用React，如何重用setState函数而不是复制和粘贴？

2 个答案: