如何实现选中<li>项后将其文本显示在Select_Button组件上？

现有代码存在的问题 #

• 未做状态提升：选中项文本值没有提升到父组件List_Window中管理，无法传递给Select_Button完成渲染
• 不符合React数据驱动设计原则：Select_Button中直接通过document.querySelector操作DOM修改弹窗样式，后续极易出现状态与UI不同步的bug
• 列表项点击回调为空实现：当前selectedItem方法仅打印日志，没有更新选中值、关闭选择弹窗的对应逻辑
• HTML语义化错误：<ul>标签下直接嵌套<div>不符合规范，<li>应当是<ul>的直接子元素

实现思路 #

1. 在父组件List_Window中统一管理「选中项文本」「弹窗显隐」两个核心状态
2. 状态、状态修改方法通过props传递给子组件，禁止子组件直接操作DOM
3. 点击列表项时更新选中项文本状态，同时修改弹窗状态为关闭
4. 调整DOM结构修复语义化问题

完整修改后代码 #

List_Window.js #

import { useState } from 'react';
import Select_Button from './Select_Button';
// Close_Button、Input_search、Image、样式文件等原有引入保持不变

export default function List_Window(props) {
  // 原有列表数据定义保持不变
  const [list, setList] = useState([
    { id: 1, name:'Names', image:'/image-logo.svg' }, 
    { id: 2, name:'Names', image:'/image-logo.svg' }, 
    { id: 3, name:'Names', image:'/image-logo.svg' }
  ])
  // 存储选中的按钮文本，可自定义初始提示值
  const [selectedName, setSelectedName] = useState('请选择名称');
  // 控制选择弹窗的显隐，默认关闭
  const [isListOpen, setIsListOpen] = useState(false);

  // 列表项点击逻辑
  function selectedItem(name) {
    setSelectedName(name);
    setIsListOpen(false);
  }

  return (
    <>
      <Select_Button 
        text_li={selectedName}
        onOpen={() => setIsListOpen(true)}
      />
    
      <section 
        className='container_blur' 
        style={{
          opacity: isListOpen ? 1 : 0,
          display: isListOpen ? 'flex' : 'none',
          transition: 'opacity 0.3s ease'
        }}
      >
        <div className={style.container}>
          <div className={style.nav}>
            <span>Select Name</span>
            <Close_Button onClick={() => setIsListOpen(false)} />
          </div>
          <Input_search />

          <div className={style.coin_container}>
            <ul className={style.ul}>
              {list.map((item) => (
                <li 
                  className={style.li} 
                  key={item.id}  
                  onClick={() => selectedItem(item.name)} 
                >
                  <Image src={item.image} width={27} height={35} />
                  <p>{item.name}</p>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>
    </>
  )
}

Select_Button.js #

export default function Select_Button(props) {
  return (
    <div className={style.select_container}>
      <button className={style.select_btn} onClick={props.onOpen}>
        <span className="text">{props.text_li}</span>
      </button>
    </div>
  )
}

效果说明 #

• 初始状态按钮显示默认提示文本，点击按钮弹出选择列表
• 点击任意列表项后，按钮自动更新显示选中项的文本内容，弹窗同步关闭
• 所有UI状态由React统一托管，不会出现UI与状态不一致的问题，后续扩展搜索过滤、默认选中、重置选择等功能无需重构核心逻辑

内容的提问来源于stack exchange，提问作者David Julian