javascript - 在条件为真时操作其他元素，Reactjs jsx

Question

我在选择选项上有一个映射循环。如果条件为 true，则选择一个选项。现在我希望 select 标记中的一个元素在条件为 true 时具有“检查”类。

<div className="select-style">
    <select>
        {xarray.map((heading, index) => 
            {return heading.headingis.toLowerCase().indexOf('earning') != -1 ?
                <option value="{heading.headingis}" key={index} selected>{heading.headingis}</option>
                :
                <option value="{heading.headingis}" key={index}>{heading.headingis}</option>
            }
       )}                                                 
    </select>
  </div>
<div className="mapping-check"></div>

1. 如果条件1为真，2应该有类“mapping-check”。否则不上课。

编辑:有多个下拉菜单，每个下拉菜单都有一个检查 div。

我如何实现这一目标？

Answer 1

您需要有一个 onChange事件<select>标签，根据所选选项，您可以更改 state property喜欢 checked成为true .

然后你将得到一个三元条件，例如:

<div className={this.state.checked ? : 'mapping-check' : ''}></div>

您可以使用另一个类或多个类来代替空字符串。