React JSX 中如何正确设置选中选项的 “selected” 属性？

2024-03-13 19:05:02

在React JSX中正确设置选中选项的“selected”属性

简介

在React应用程序中使用<select>菜单时，准确地设置选定选项的“selected”属性至关重要。如果不加以注意，可能会导致语法错误，阻碍应用程序的正确运行。本文将深入探讨此问题，提供清晰且简洁的解决方案。

问题陈述

在React组件的render()方法中，可以通过以下方式设置选中选项：

<option value={option.value} selected={optionState === option.value}>{option.label}</option>

然而，这种写法在JSX编译时会产生语法错误。为了解决这个问题，我们需要采用正确的JSX语法来条件渲染该属性。

解决方案

正确的解决方法是使用三元条件运算符（“？”和“：”）来动态设置“selected”属性。重写后的代码如下：

<option value={option.value} selected={optionState === option.value ? true : false}>{option.label}</option>

在这种表达式中，“selected”属性的取值是一个布尔值。当optionState等于option.value时，“selected”属性为true，表示该选项被选中；否则为false。

完整代码

结合正确的语法，完整的代码示例如下：

render() {
  const options = [];
  const optionState = this.props.optionState;

  this.props.options.forEach((option) => {
    options.push(
      <option value={option.value} selected={optionState === option.value}>{option.label}</option>
    );
  });

  return <select>{options}</select>;
}