Question

我曾经在jQuery中建立了一个网站。在此网站上，您可以自定义字符，并根据您选择的内容加载图像。在幕后，文件名是从您单击的菜单选项中复制的。例如......

让我们说你想要一个瘦小的女性。你进入子菜单然后点击＆＃34; skinny，＆＃34;然后点击＆＃34;女性。＆＃34;该程序存储＆＃34; skinny＆＃34;和女性＆＃34;从您刚刚点击的选项（使用.text()）。然后使用简单的连接将显示的图像更新为skinny-female.svg。该网站在这里......

http://matiny.altervista.org/VI/vice-bodies/

有了反应，我已经感到困惑，因为你必须以变量名而不是文件路径存储图像。我需要一种方法来分割变量名称，就像上面的例子一样。然后可以根据用户选择将变量名称放回到一起。

Answer 1

只要用户点击相应的按钮，您就可以使用event.target.innerText将图像名称存储在状态变量中。然后，可以根据这些状态变量设置图像的src属性。

像这样：

import React from 'react';

class ImageSelector extends React.Component {
  constructor() {
    super();

    this.state = {
      imageName1: '',
      imageName2: ''
    }
  }

  render() {

    let imgSrc = this.state.imageName1 + '-' + this.state.imageName2 + '.svg';

    return(
      <div>
        <button onClick={(ev) => this.setState({ imageName1: ev.target.innerText})}>skinny</button>
        <button onClick={(ev) => this.setState({ imageName2: ev.target.innerText})}>female</button>
        <img src={imgSrc} />
      </div>
    );

  }
}

使用React，基于单击具有相同名称的按钮加载文件的简单方法是什么？

1 个答案: