React笔记应用：点击FaExpandAlt图标实现已存笔记编辑功能求助

要实现点击FaExpandAlt图标编辑已有笔记的功能，我们可以通过扩展状态、复用现有组件、添加更新逻辑来完成，具体步骤如下：

1. 在App.js中补充编辑相关状态与更新函数 #

首先在App组件中新增状态跟踪当前编辑的笔记信息，同时实现更新笔记的核心逻辑：

// App.js 中补充状态
const [isEditing, setIsEditing] = React.useState(false);
const [editingNoteId, setEditingNoteId] = React.useState(null);

// 新增更新笔记的函数
const updateNote = (updatedTitle, updatedBody, updatedColor) => {
  setnotes(prevNotes => 
    prevNotes.map(note => 
      note.id === editingNoteId 
        ? { 
            ...note, 
            title: updatedTitle, 
            bodyText: updatedBody, 
            bgColor: updatedColor, 
            date: new Date().toLocaleDateString() 
          }
        : note
    )
  );
  // 退出编辑模式并清空输入状态
  setIsEditing(false);
  setEditingNoteId(null);
  setTitle('');
  setNoteText('');
};

// 修改渲染逻辑，编辑模式下复用AddNote组件
return (
  (textAreaFlag || isEditing) ?
  <AddNote 
    textAreaFlag={() => {
      setTextAreaFlag(false);
      setIsEditing(false);
      setTitle('');
      setNoteText('');
    }}
    setNote={isEditing ? updateNote : props.setNote} // 根据模式选择新增/更新函数
    title={isEditing ? notes.find(n => n.id === editingNoteId)?.title : title}
    bodyText={isEditing ? notes.find(n => n.id === editingNoteId)?.bodyText : noteText}
    color={isEditing ? notes.find(n => n.id === editingNoteId)?.bgColor : '#ffffff'}
    setTitle={setTitle}
    setNoteText={setNoteText}
    isEditing={isEditing}
  /> :
  <div style={{backgroundColor: darkMode && "#343434" }} className='app'>
    <Header 
      search={setSearchText}
      searchText={searchText}
      darkMode={DarkModeToggle}
      darkValue={darkMode}
    />
    <div className="note-list">
      {notesElements}
    </div>
    <button 
      className='add-button'
      onClick={() => setTextAreaFlag(true)}
    >+</button>
  </div> 
)

2. 给Note组件的展开图标添加编辑触发事件 #

修改Note组件，给FaExpandAlt绑定点击事件，通知父组件进入编辑模式：

// Note.js
function Note (props){
  return (
    <div className='note' style= {{backgroundColor: props.color}}>
      <div className='inner-note'>
        <h4>{props.title}</h4>
        <span>{props.bodyText.slice(0, 150)}</span>
        <div className='note-footer'>
          <p>{props.date}</p>
          <FaTrash 
            onClick={() => props.delete(props.id)}
            className = "delete-icon"
          />
          <FaExpandAlt 
            onClick={() => props.onEdit(props.id)}
            className="expand-icon"
            style={{cursor: 'pointer'}}
          />
        </div>
      </div>
    </div>
  )
}

同时在App.js的笔记渲染逻辑中传递onEdit回调：

const notesElements = notes.map((note) => {
  return (
    <Note 
      key={note.id}
      id={note.id} 
      title={note.title}
      bodyText={note.bodyText}
      date={note.date}
      color={note.bgColor}
      delete={props.delete}
      onEdit={(noteId) => {
        setIsEditing(true);
        setEditingNoteId(noteId);
        // 提前填充当前笔记的内容到输入框
        const targetNote = notes.find(n => n.id === noteId);
        setTitle(targetNote.title);
        setNoteText(targetNote.bodyText);
      }}
    />
  )
})

3. 调整AddNote组件适配编辑模式 #

修复AddNote组件中缺失的颜色状态，同时根据编辑模式切换按钮文本：

// AddNote.js
export default function AddNote(props) {
  const [color, setColor] = React.useState(props.color);

  function handleChange(event){
    props.setNoteText(event.target.value);
  }

  function handletitlechange(event){
    props.setTitle(event.target.value);
  }

  function handleSaveClick(){
    props.setNote(props.title, props.noteText, color);
    props.textAreaFlag();
  }
    
  return (
    <div className='add-note' style={{backgroundColor: color}}>
      <div className='add-note-top'> 
        <button onClick={props.textAreaFlag}> <FaAngleLeft /> </button>
        <input 
          type="color" 
          value={color} 
          onChange={e => setColor(e.target.value)} 
        />    
      </div>
      <div className='addnote-inputs'>
        <input 
          placeholder='Title'
          value={props.title}
          onChange={handletitlechange}
        />
        <textarea
          cols='50'
          rows='50'
          placeholder='Type to add a note...'
          value={props.noteText}
          onChange={handleChange}
        />
      </div>
      <button
        onClick={handleSaveClick} 
        className='save'>
        {props.isEditing ? 'Update' : 'Save'}
      </button>
    </div>
  )
}

关键说明 #

• 复用AddNote组件同时处理新增和编辑，通过isEditing状态区分逻辑，减少代码冗余
• 点击展开图标时自动填充当前笔记内容到输入框，提升用户体验
• 更新笔记时自动修改日期，保证信息时效性
• 修复了AddNote组件中缺失的颜色状态定义问题

内容的提问来源于stack exchange，提问作者Abdullahi Olateju