javascript - react中option标签如何确定selected？

问题描述

问 题

我想在react中返回一组option，其中有一个option我想把他设置为selected，不知道如何实现。
大致代码

render() {
    let items = ['a', 'b', 'c', 'd']
      .map((fileName) => (
        if(fileName == 'd'){
          <option key={fileName} value={fileName} selected>
            {fileName}
          </option>
        }else{
          <option key={fileName} value={fileName}>
            {fileName}
          </option>
        }
      ));
    return (
      <div>
        <select
          onChange={this.onChooseLocale.bind(this)}
          defaultValue={Settings.get('locales', 'en-US')}
        >
        {items}
        </select>
      </div>
    );
  }

不做判断的话，直接写

let items = ['a', 'b', 'c', 'd']
      .map((fileName) => (
          <option key={fileName} value={fileName}>
            {fileName}
          </option>
      ));

但是加了 if else 就不行了。

已经搞定了～ 不用判断if else， 只需要在option中加上value属性，
当属性和option的value相同时，就会自动显示

解决方案

jsx中select标签有value属性，当select的value与option的value相同时，那个option就是选中状态。所以你需要改的是state，而不是直接改dom

这篇关于javascript - react中option标签如何确定selected？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！