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

Question

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

问题是，每次我选择一个选项时，变量的名称被放置在图像的SRC中，而不是图像本身的路径。而且每次我选择一个选项时，它似乎也没有渲染。

这是我的函数代码:

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

您正在传递给您的函数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>
)

Answer 2

如果只有两个选项，可以这样处理。但是如果你有几个选项，你可以使用一个本地函数从选定的选项中获取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>