每次用户在 React.js 中选择一个选项时呈现不同的图像

Question

我有一个带有多个选项的 select 表格。我希望每次用户单击任何选项时，表单右侧的图像都会发生变化。

问题是每次我 select 一个选项时，变量的名称都放在图像的 SRC 中，而不是图像本身的路径。而且它似乎并没有在我每次 select 一个选项时呈现。

这是我的函数代码：


import ledger1 from '../media/ledger1.png'
import ledger4 from '../media/ledger4.png'

const RarityMenu = () => {

  const [ imgselected, setimg ] = useState({
    color:'',
    background:'',
  });

const { color, background } = imgselected;

 const getImageData = (e : any) => {
    setimg({  
      ...imgselected,
      [ e.target.name ] : e.target.value
    })
   }

这就是我尝试更改图像的方式 url

return (
<div>
 <form>
  <label>Color</label>
  <select
  name="color"
  value={color}
  onChange={getImageData}
  >
   <option value="ledger1">Color1</option>
   <option value="ledger4">Color2</option>

  </select>
 </form>
</div>

<div>
 <img src={imgselected.color}/>
</div>

这输出：

<img src="ledger4">

而不是：

<img src="/static/media/ledger1.fef74bb8.png">

知道我做错了什么吗？

Answer 1

如果你只有两个选择，你可以这样处理。但是，如果您有多个选项，则可以使用本地函数从所选选项中获取 src 值：

return (
<div>
 <form>
  <label>Color</label>
  <select
  name="color"
  value={color}
  onChange={getImageData}
  >
   <option value="ledger1">Color1</option>
   <option value="ledger4">Color2</option>

  </select>
 </form>
</div>

<div>
 <img src={imgselected.color === "ledger1" ? ledger1: ledger4 }/>
</div>

Answer 2

您正在向您的函数 getImageData() 传递所选选项的值，在您的例子中是与图像变量同名的字符串，因此您没有传递包含图像字符串的变量，您只是传递一个类似于变量名称的字符串。所以我的建议是使用图像的变量，例如 ledger1 作为选项组件中的值，如下所示：<option value={ledger1}>Color1</option>

return (
 <div>
  <form>
   <label>Color</label>
   <select
   name="color"
   value={color}
   onChange={getImageData}
   >
    <option value={ledger1}>Color1</option>
    <option value={ledger4}>Color2</option>
   </select>
  </form>
 </div>

 <div>
  <img src={imgselected.color}/>
 </div>
)

每次用户在 React.js 中选择一个选项时呈现不同的图像

Render a different image each time the user selects an option in React.js

onclick

reactjs