如何使用React.js实现段落中特定文本的可编辑功能？

Absolutely! You can definitely pull this off in React—let me walk you through a simple, effective way to make targeted sections of your paragraph editable while locking down the rest of the content.

Core Idea #

The trick is to split your paragraph into static, non-editable text chunks and dedicated editable segments. We’ll use the native contentEditable attribute on specific elements to enable editing, and manage the editable content with React state to persist changes.

Example Implementation #

Here’s a complete component based on your sample paragraph, where the bolded section is set as editable:

import { useState } from 'react';

const EditableParagraph = () => {
  // Track the content of our editable section
  const [editableContent, setEditableContent] = useState("In ac felis quis tortor malesuada pretium");

  // Update state when the user finishes editing (blurs the editable area)
  const handleEditComplete = (e) => {
    setEditableContent(e.target.textContent);
  };

  // Optional: Prevent formatted text from being pasted
  const handlePlainTextPaste = (e) => {
    e.preventDefault();
    const plainText = e.clipboardData.getData('text/plain');
    document.execCommand('insertText', false, plainText);
  };

  return (
    <p style={{ lineHeight: 1.6 }}>
      Fusce commodo aliquam arcu. 
      <span 
        contentEditable={true}
        onBlur={handleEditComplete}
        onPaste={handlePlainTextPaste}
        style={{
          fontWeight: 'bold',
          outline: 'none',
          borderBottom: '1px dashed #666',
          padding: '0 2px'
        }}
      >
        {editableContent}
      </span>
      . Fusce vel dui. Etiam ultricies nisi vel augue. Etiam ultricies nisi vel augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed
    </p>
  );
};

export default EditableParagraph;

Key Details Breakdown #

• State Management: We use useState to store the editable text, ensuring changes are saved across component re-renders.
• Editable Segment: The <span> with contentEditable={true} is the only interactive part of the paragraph—all other text remains static.
• User Experience: Inline styles add clear visual cues (bold text, dashed underline) to let users know this section is editable, and outline: none removes the default browser focus border for a cleaner look.
• Paste Handling: The handlePlainTextPaste function strips formatting from pasted content, keeping the editable section consistent with the rest of the paragraph.

Advanced Tips #

• For multiple editable sections, expand this pattern with multiple state variables or a single object to manage all editable content.
• If you need full rich-text editing capabilities (like bullet points or custom formatting), consider libraries like Slate.js or Draft.js—these handle edge cases far better than raw contentEditable.
• To mimic native input behavior, add onKeyDown handlers (e.g., to save changes when the user presses Enter).

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