Javascript 反应-单击列表元素时更改图标

我有一个下拉列表状态为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>
      )
    }
  }

renderDropdown（）{
if（this.state.dropdown）{
const projectsList=this.props.projects.map（（项目）=>(
this.handleProjectSelection（project.get（'id'））}>
{project.get（'name'）}

))
返回(

{projectsList}

)
}
}

如下图所示：

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

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

this.setState（{dropdown:！this.state.dropdown}）}
className='u-cursor--指针fa文件夹打开'>
{this.renderDropdown（）}

但我想做的是，每次选择项目时，文件夹图标都会消失，并显示项目名称的前两个字母，类似这样：

project.get（'name'）。substring（0，2）

如下图所示：

---

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

我认为您首先需要重构文件夹图标的显示方式。我个人会根据它的复杂程度，将我在下面所做的转化为一个函数

这基本上是说，如果hasSelectedProject===true（无论hasSelectedProject看起来像什么），则显示文件夹图标，否则显示项目代码。逻辑也是基本的，所以我再次将其移动到一个函数，但基本的想法是你需要拉出文件夹图标，它耦合得太紧密了

return (
        <div>
          <ul name='projectList'
            form='start-retro-form'>
                {!this.state.hasSelectedProject ?
                  <span className='c-start-retro-folder-dropdown'></span>
                :
                  <span>Project name code here</span>
                }
                {projectsList}
          </ul>
        </div>
      )

返回(

{！this.state.hasSelectedProject？
:
项目名称代码在这里
}
{projectsList}

)

我认为首先需要重构文件夹图标的显示方式。我个人会根据它的复杂程度，将我在下面所做的转化为一个函数

这基本上是说，如果hasSelectedProject===true（无论hasSelectedProject看起来像什么），则显示文件夹图标，否则显示项目代码。逻辑也是基本的，所以我再次将其移动到一个函数，但基本的想法是你需要拉出文件夹图标，它耦合得太紧密了

return (
        <div>
          <ul name='projectList'
            form='start-retro-form'>
                {!this.state.hasSelectedProject ?
                  <span className='c-start-retro-folder-dropdown'></span>
                :
                  <span>Project name code here</span>
                }
                {projectsList}
          </ul>
        </div>
      )

返回(

{！this.state.hasSelectedProject？
:
项目名称代码在这里
}
{projectsList}

)

{this.state.selectedProject&&this.state.selectedProject.name.substring（2,0）}
{！this.state.selectedProject&&
{this.renderDropdown（）}
}

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

{this.state.selectedProject&&this.state.selectedProject.name.substring（2,0）}
{！this.state.selectedProject&&
{this.renderDropdown（）}
}

---

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

但我希望文件夹图标是默认的，每次单击列表中的一个元素时，文件夹都会更改。文件夹图标是我发送的最后一个代码` this.setState（{dropdown:！this.state.dropdown}）}className='u-cursor--pointer fa fa folder open'>`这就是文件夹所以您希望文件夹在选择项目后消失吗？是的！：）我希望文件夹消失并替换为两个字母，一旦选择项目，但我希望文件夹图标为默认图标，每次单击列表中的一个元素时，文件夹都会更改。文件夹图标是我发送的最后一个代码` this.setState（{dropdown:！this.state.dropdown}）}className='u-cursor--pointer fa fa folder open'>`这就是文件夹所以您希望文件夹在选择项目后消失吗？是的！：）我希望文件夹消失，并由两个字母取代，一旦一个项目被选中