Блог

все еще немного новичок в этом деле. У меня есть выбор с выпадающими опциями, и я пытаюсь обновить состояние «уровни» при изменении параметра списка. Когда я изменяю состояние уровней вручную, оно повторно отображается, но не при использовании функции 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>
 

Спасибо за вашу помощь Я понял, что мне нужно обновить список, а не уровни, если это имеет смысл, вот что я сделал, чтобы это сработало.

 <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>
 

Я думаю, вы забыли использовать value атрибут:

 <select value={levels.toString()} 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>