javascript - React - 单击列表元素时更改图标

Question

我有一个下拉菜单状态为 false 的类

class StartRetroForm extends Component {
  constructor (props) {
    super(props)
      dropdown: false
    }
  }

然后我有这个功能，它的作用是在下拉列表中显示项目列表

  renderDropdown () {
    if (this.state.dropdown) {
      const projectsList = this.props.projects.map((project) => (
        <li className='u-cursor--pointer c-start-retro-line'
          key={project.get('id')}
          onClick={() => this.handleProjectSelection(project.get('id'))} >
          <i className='fa fa-square' style={{color: project.get('color')}}></i>
          {project.get('name')}
        </li>
      ))
      return (
        <div>
          <ul className='c-start-retro-folder-dropdown'
            name='projectList'
            form='start-retro-form'>
            {projectsList}
          </ul>
        </div>
      )
    }
  }

如下图所示:

然后在 render() 方法中，我有一个文件夹图标，每次单击它都会打开和关闭。

    <i
      onClick={() => this.setState({ dropdown: !this.state.dropdown })}
      className='u-cursor--pointer fa fa-folder-open'>
    </i>
    {this.renderDropdown()}

但是我想做的是，每次选择一个项目时，文件夹图标都会消失，并显示项目名称的前两个字母，如下所示:project. get('name').substring(0, 2)

如下图所示:

如何使文件夹消失并在选择项目时显示项目的前两个字母？

Answer 1

{this.state.selectedProject && this.state.selectedProject.name.substring(2,0)}
    {!this.state.selectedProject &&
        <span>
            <i
                onClick={this.handleClick}
                className={this.state.dropdown === false ? 'u-cursor--pointer fa fa-folder' : 'u-cursor--pointer fa fa-folder-open'}>
            </i>
            {this.renderDropdown()}
        </span>
    }

https://jsfiddle.net/hggbLbf9/

您基本上可以有一个状态变量来检查选择，如果存在选择，您可以显示所选项目并隐藏文件夹图标。