Блог

Главная - Вопросы по программированию - React js — проверка значения элемента в массиве опций

React js — проверка значения элемента в массиве опций

#javascript #reactjs

Вопрос:

Я новичок в Реагировании, так что, пожалуйста, потерпите меня. Для функции onChange мне нужно проверить, находится ли выбранное значение в пользовательском интерфейсе в массиве.

 export const getRestrictedChoices = () => {
    return (<>{RestrictedChoices}</>)
};

const Choices = (
    <>
        // lots of choices
    </>
)

const RestrictedChoices = (
    <>
        //subset of Choices
        <Option value="Choice1">Choice1</Option>
        <Option value="Choice2">Choice2</Option>
        <Option value="Choice3">Choice3</Option>
        <Option value="Choice4">Choice4</Option>
    </>
)

Я хотел бы проверить, находится ли значение, выбранное пользователем из списка «Выбор» (раскрывающийся список), в ограниченном выборе, а затем обновить состояние. Я пробовал что-то подобное, что приводит к ошибке:

 const onChoiceChange = (value) => {
    if (value amp;amp; getRestrictedChoices().includes(value)) {
        // do something
    }
}

Я также тщетно пытался провести рефакторинг getRestrictedChoices , но с аналогичными результатами:

 export const getRestrictedChoices = () => {
    return (<>{Choices.values()}</>)
};

Оба Choices и RestrictedChoices находятся в отдельном файле конфигурации.

Я правильно подхожу к проблеме, и если да, то какой лучший способ проверить свою принадлежность RestrictedChoices ?

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

1. Является ли это частью выбора/Выпадающего списка? Что такое компонент <Option>?

2. Зачем вам нужно проверять значения параметров, так как обработчик onChange выдаст вам выбранное значение параметра, что означает, что оно должно существовать как значение параметра?

3. если вместо опции «жестко закодировано» создать массив из них, то получить значение массива будет несложно.

4. Внес некоторые правки, чтобы сделать вопрос более ясным. Таким образом, похоже, что использование <Option> тега предназначено специально для перехода к раскрывающемуся списку или какому-либо другому элементу формы, а не для таких тестов на членство?

5. Что такое (<>{Выбор}<></>) ?

Ответ №1:

Привет, я не на 100% понимаю, что вам нужно, но, пожалуйста, посмотрите приведенный ниже пример, если это вам поможет:

 let choices = ["Ivan", "Dragmon", "Guilmon", "Voz Rasposa", "Omar"];
let restrictedChoices = ["Dragmon", "Guilmon"];

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { message: "" };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(e) {
    const newName = e.target.value;
    let msg = "";
    if (restrictedChoices.find((x) => x === newName))
      msg = "Your choice is "   newName;
    else msg = "Your choice is "   newName   ". But it is rectricted.";

    this.setState({ message: msg });
  }
  render() {
    return (
      <div>
        <h1>{this.state.message}</h1>
        <select onChange={this.handleChange}>
          {choices.map((n) => (
            <option key={n} value={n}>
              {n}
            </option>
          ))}
        </select>
      </div>
    );
  }
}

Вы можете запустить это в CodeSandbox

Ответ №2:

Попробуйте это, чтобы посмотреть, приведет ли это вас на правильный путь.

 let choices = ["Ivan", "Dragmon", "Guilmon", "Voz Rasposa", "Omar"];
let restrictedChoices = ["Dragmon", "Guilmon"];

const isInRestrictedChoices = (value) => restrictedChoices.indexOf(value) > -1; 

console.log(isInRestrictedChoices('Dragmon')) // true
console.log(isInRestrictedChoices('Omar')) // False
Метки: