时间戳

首页 > 解决方案 > 使用选择和选项时状态不更新

reactjs - 使用选择和选项时状态不更新

问题描述

对此还是有点新意。我有一个带有下拉选项的选择，并且正在尝试在列表选项更改时更新“级别”状态。当我手动更改级别状态时，它会重新渲染，但在使用 select 的 onChange 函数时不会。谢谢。

  function App() {
  const [color, setColor] = useState("");
  const [error, setError] = useState(false);
  const [levels, setLevels] = useState(10);
  const [list, setList] = useState(new Values('#245422').all(levels));
  

  const handleSubmit = (e) => {
    e.preventDefault();
    try {
      let colors = new Values(color).all(levels);
      setList(colors);
    } catch (error) {
      setError(true);
      console.log("please enter valid color");
    }
  };
  
  return (
    <>
      <section className="container">
        <h3>color generator</h3>
        <form onSubmit={handleSubmit}>
          <input
            type="text"
            value={color}
            onChange={(e) => setColor(e.target.value)}
            placeholder="#ff34sd"
            className={`${error ? "error" : null}`}
          />
          <button className="btn" type="submit">
            submit
          </button>
        </form>
        <div>
      <label htmlFor="variation" className="select-label">
        # of variations
      </label>
      <select name="variation" id="variation" onChange={(e) => {
        const selectValue = parseInt(e.target.value)
        setLevels(selectValue)
        console.log(selectValue)
      }}>
        <option value="26" default>7</option>
        <option value="10">21</option>
        <option value="6">32</option>
        <option value="4">51</option>
        <option value='2'>101</option>
      </select>

    </div>

标签： reactjsselectoptionsuse-state

解决方案

感谢您的帮助，我发现我需要更新列表而不是级别，如果这有意义，这就是我为使其工作所做的工作。

<select name="variation" id="variation" onChange={(e) => {
        const selectValue = parseInt(e.target.value)
        setList(new Values(`${color}`).all(selectValue))
      }}>
        <option value="26" default>7</option>
        <option value="10">21</option>
        <option value="6">32</option>
        <option value="4">51</option>
        <option value='2'>101</option>
      </select>

推荐阅读