React+Material Ui自定义SVG表情滑块及状态同步功能实现咨询

解决方案 #

现有问题修复 #

原有代码无法同步表情是因为存在几个逻辑问题：

• 滑块未做value绑定，不是受控组件，无法同步状态
• datalist的option值设为了字符串，数值判断逻辑无法匹配
• 数值区间存在70-74的空缺段，无对应表情匹配
• 导入了未使用的Router冗余依赖

自定义SVG表情实现 #

你可以将自定义SVG封装为组件直接调用，以下是完整修改后的可运行代码：

import React, { useState } from "react";
// 替换为你本地自定义SVG文件的实际存储路径
import MoodAwful from './assets/awful.svg'
import MoodBad from './assets/bad.svg'
import MoodNeutral from './assets/neutral.svg'
import MoodGood from './assets/good.svg'
import MoodGreat from './assets/great.svg'

export default function Emoji() {
  const [mood, setMood] = useState(<MoodAwful />);
  const [sliderVal, setSliderVal] = useState(0);

  function handleChange(e) {
    const val = Number(e.target.value);
    setSliderVal(val);
    if (val < 25) {
      setMood(<MoodAwful />);
    } else if (val >= 25 && val < 50) {
      setMood(<MoodBad />);
    } else if (val >= 50 && val < 75) {
      setMood(<MoodNeutral />);
    } else if (val >= 75 && val < 90 ) {
      setMood(<MoodGood />);
    } else if (val >= 90) {
      setMood(<MoodGreat />);
    }
  }

  return (
    <div className="emoji">
      <div style={{position: "relative", bottom: "-90px", fontSize: "100px",transition: "ease-in-out"}}>
        <input 
          style={{width: "-webkit-fill-available"}} 
          type="range" 
          min="0"
          max="100"
          value={sliderVal}
          list="tickmarks" 
          onChange={handleChange}  
        />
      </div>
      <datalist id="tickmarks">
        <option value="0" label="糟糕"></option>
        <option value="25" label="不好"></option>
        <option value="50" label="一般"></option>
        <option value="75" label="不错"></option>
        <option value="90" label="很好"></option>
      </datalist>
      <p style={{position: "relative", bottom: "108px", width: "70px", height: "70px" }}>{mood}</p>
    </div>
  );
}

如果不想单独保存SVG文件，也可以直接把SVG的JSX代码写在对应的setMood参数位置，无需额外导入文件。

内容的提问来源于stack exchange，提问作者Shehabd Dwedar