Блог

Главная - Вопросы по программированию - Создание выделения в react js

Создание выделения в react js

javascript #html #reactjs

#javascript #HTML #reactjs

Вопрос:

Я создал select с помощью react js.

 import { useState } from "react";
import "./styles.css";

const options = [
  {
    id: "test1",
    label: "label1"
  },
  {
    id: "test1",
    label: "label2"
  },
  {
    id: "color",
    label: "Test"
  }
];

export default function App() {
  const [value, setValue] = useState("");

  const handleChange = (e) => {
    setValue(e.target.value);
  };
  return (
    <div className="App">
      <select value={value} onChange={handleChange}>
        {options.map((i) => {
          return <option value={i.id}>{i.label}</option>;
        })}
      </select>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

У меня есть ситуация, когда значение (ID) одно и то же, но заголовок отличается, как в случае с 2 первыми вариантами.

Попытка нажать на label2 выбранную стрелку, все еще выбранную на предыдущей (label1). Как это исправить?
демо-версия: https://codesandbox.io/s/red-microservice-tesgs?file=/src/App.js:0-669

Комментарии:

1. Одним из вариантов было бы присвоить каждому параметру фактический уникальный идентификатор (а также текущий идентификатор, который я бы переименовал в «значение») и сохранить его. Затем вы можете использовать его, чтобы установить правильную строку в значение selected и при необходимости получить доступ к значению соответствующих объектов.

Ответ №1:

Предполагая, что вы не можете изменить идентификаторы (лучший способ — иметь уникальные идентификаторы), вы можете полагаться на индекс вашего массива опций:

 const options = [
  {
    id: "test1",
    label: "label1"
  },
  {
    id: "test1",
    label: "label2"
  },
  {
    id: "color",
    label: "Test"
  }
];

export default function App() {
  const [value, setValue] = useState({
    id: "",
    index: ""
  });

  const handleChange = (e, index) => {
    setValue({ id: e.target.value, index: index });
  };
  return (
    <div className="App">
      <select
        value={options[value.index]}
        onChange={(e, index) => handleChange(e, index)}
      >
        {options.map((i, index) => {
          return (
            <option key={index} value={i.id}>
              {i.label}
            </option>
          );
        })}
      </select>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Ответ №2:

Похоже, вам нужно предоставить selected атрибут вашему <option /> элементу, например:

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

/*[...]*/

<select onChange={handleChange}>
  {options.map(({id, label}, index) => {
    return <option key={index} value={id} selected={value === id}>{label}</option>;
  })}
</select>

Кроме того, обратите key внимание на приведенную выше опору, вы всегда должны иметь это при итерации по узлам JSX. Это должно быть уникальное значение для этого индекса, я использовал индекс массива, но на самом деле это должно быть что-то вроде идентификатора. Если вы используете индекс, вы будете вводить всевозможные странные ошибки при изменении исходных данных.

Что касается дубликата id в вашем массиве, как упоминалось выше, лично мне это кажется плохой структурой данных. Я бы гарантировал, что ваш id всегда уникален.

С какой целью вы хотите, чтобы он дублировался, из интереса?

Метки: