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

我认为您需要首先重构显示文件夹图标的方式。我个人会将我在下面所做的工作转移到一个函数中，具体取决于它的复杂程度。

这基本上说如果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>
      )

Answer 2

{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/

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

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

2 个答案: