Javascript '；范围'；输入类型不为'；t在React.js文档上滑动，但在codepen上工作？

我试图在我的React应用程序中实现一个范围滑块，但当我输入代码时，滑块根本不起作用

它不会左右拖动。单击它也不会移动它。尽管如此，如果我在codepen上使用完全相同的代码，滑块工作完全正常

我已经尝试过研究这个问题，但我找不到一个明确的答案。有人知道会出什么问题吗

有关守则：

<input
            type="range"
            min="1"
            max="100"
            value="50"
            class="slider"
            id="myRange"
          />

这是我的整个应用程序

import "./App.scss"
import React, { useState } from "react"

function App() {
  const [firstColorInput, setFirstColorInput] = useState("")
  const [secondColorInput, setSecondColorInput] = useState("")

  const [mode, setMode] = useState("single")

  const handlefirstColorChange = (e) => {
    setFirstColorInput(e.target.value)
    console.log(firstColorInput)
  }

  const handlesecondColorChange = (e) => {
    setSecondColorInput(e.target.value)
    console.log(secondColorInput)
  }

  return (
    <div
      className="App"
      style={{
        background:
          mode === "single"
            ? firstColorInput
            : `linear-gradient(${firstColorInput}, ${secondColorInput})`,
      }}
    >
      <div class="container">
        <div id="colour_picker">
          <input
            type="text"
            onChange={handlefirstColorChange}
            value={firstColorInput}
            id="input_first"
            placeholder={
              mode === "single"
                ? "Enter color name or code"
                : "Enter First Colour"
            }
            class="inputs"
          />
          <input
            type="text"
            onChange={handlesecondColorChange}
            value={secondColorInput}
            style={{ display: mode === "single" ? "none" : "block" }}
            id="input_second"
            placeholder={mode === "single" ? "" : "Enter Second Colour"}
            class="inputs"
          />

          <button
            onClick={() => setMode(mode === "single" ? "gradient" : "single")}
          >
            {mode === "single" ? "Single Colour" : "Gradient"}
          </button>

          <input
            type="range"
            min="1"
            max="100"
            value="50"
            class="slider"
            id="myRange"
          />
        </div>
      </div>
    </div>
  )
}

export default App

导入“/App.scss”
从“React”导入React，{useState}
函数App（）{
常量[firstColorInput，setFirstColorInput]=useState（“”）
常量[secondColorInput，setSecondColorInput]=useState（“”）
const[mode，setMode]=useState（“单一”）
常量handlefirstColorChange=（e）=>{
setFirstColorInput（例如target.value）
console.log（firstColorInput）
}
const handlesecondColorChange=（e）=>{
setSecondColorInput（如target.value）
console.log（secondColorInput）
}
返回(
设置模式（模式==“单一”？“渐变”：“单一”）}
>
{模式===“单一”？“单一颜色”：“渐变”}
)
}
导出默认应用程序

在react中，这告诉它将值设置为50，并且永远不要更改它

您有两个选项：您可以将输入作为非受控组件运行，方法是为其指定默认值：

defaultValue="50"

或者，您可以通过使用状态变量作为受控组件来执行此操作：

const [value, setValue] = useState("50");

//...
<input
  type="range"
  min="1"
  max="100"
  value={value}
  onChange={(e) => setValue(e.target.value)}
  class="slider"
  id="myRange"
/>

const[value，setValue]=useState（“50”）；
//...
setValue（e.target.value）}
class=“滑块”
id=“myRange”
/>

---

如果您不确定需要哪一个，请选择受控版本。有关受控组件和非受控组件之间差异的更多信息，请参阅和

向我们展示您的

应用程序。scss

我删除了所有这些只是为了排除它，我尝试了完全没有任何scss或正常CSS的应用程序。仍然是相同的结果，因此被判定为不完美。像做梦一样工作！我每天都会学到一些新的东西：）

const [value, setValue] = useState("50");

//...
<input
  type="range"
  min="1"
  max="100"
  value={value}
  onChange={(e) => setValue(e.target.value)}
  class="slider"
  id="myRange"
/>