SetContents SunEditor không hoạt động React

Question

Tôi đã thử nghiệm với SunEditor vì tôi muốn tải trước một văn bản HTML được lưu trữ trong DB và cho phép người dùng sửa đổi nó nếu cần. Tôi đang chuyển một biến ref từ cha mẹ để khi nhấp vào nút gửi, anh ấy có thể nhận được giá trị và lưu các sửa đổi. setContents đôi khi chỉ hoạt động. Khi tôi lưu dự án và được biên dịch một lần nữa, văn bản xuất hiện. Nhưng nếu tôi sử dụng ứng dụng hoặc làm mới văn bản trên cửa sổ. Tôi đã kiểm tra rằng biến vẫn có giá trị. Tôi mới làm quen với React và tôi không chắc liệu mình có làm sai hay không hay chỉ là suneditor-react bị lỗi. Bạn có thể giúp tôi được không?

Đây là mã của tôi:

export const TranslationArea = React.forwardRef((props, ref) =>{    
    
    const handleEditorChange = (value) => {
        console.log(value);  
    
        ref.current= value;
      }
     const handleClick  = () => {
         console.log(ref.current);
     } 
    return(
        <div>
            <h2>{props.title}</h2>
                <SunEditor 
                    autoFocus={true}
                    width="100%"
                    height="150px"
                    setOptions={{
                        buttonList: [
                            // default
                            ['undo', 'redo'],
                            ['bold', 'underline', 'italic', 'list'],
                            ['table', 'link', 'image'],
                            ['fullScreen']
                        ]
                    
                    }}
                    setContents={props.content}
                    onChange={handleEditorChange}
            
                />
                <div>{props.content}</div>
            <button onClick={handleClick}>Content</button>
        </div>
    );
});

Đây là ảnh chụp màn hình với nội dung được tải đúng cách bên trong SunEditor div (chỉ khi biên dịch dự án):

Nếu tôi làm mới trang hoặc điều hướng đến cùng một liên kết ...

Tôi đã hiển thị một div có cùng props.content chỉ để kiểm tra xem fowardRef có đang hoạt động hay không. Tại sao setContents hiện đang hoạt động? Tôi đã kiểm tra với các công cụ React và thuộc tính được tải:

Bất kỳ ý tưởng?

Answer 1

Tôi đang chuyển một biến ref từ cha mẹ để khi nhấp vào nút gửi, anh ấy có thể nhận được giá trị và lưu các sửa đổi.

Nếu tất cả những gì bạn cần truy cập là giá trị, hãy chuyển một lệnh gọi lại. Chúng tôi sẽ gọi nó onSumbitvà nó sẽ là một hàm lấy stringgiá trị từ SunEditorthành phần.

Để có quyền truy cập vào giá trị đã chỉnh sửa hiện tại, tôi đang sử dụng trạng thái cục bộ trong TranslationAreathành phần và cập nhật trạng thái đó thông qua onChangephương thức của trình chỉnh sửa . Sau đó, khi nút gửi được nhấp vào, tôi gọi onSubmitvới giá trị contenttừ trạng thái cục bộ. (Có thể có một cách khác để làm điều này nhưng tôi không quen thuộc với SunEditor).

Thành TranslationAreaphần trông như thế này:

export const TranslationArea = ({initialContent = "", title, onSubmit}) => {    
  const [content, setContent] = useState(initialContent);

  return(
      <div>
          <h2>{title}</h2>
              <SunEditor 
                  autoFocus={true}
                  width="100%"
                  height="150px"
                  setOptions={{
                      buttonList: [
                          // default
                          ['undo', 'redo'],
                          ['bold', 'underline', 'italic', 'list'],
                          ['table', 'link', 'image'],
                          ['fullScreen']
                      ]
                  
                  }}
                  setContents={initialContent}
                  onChange={setContent}
              />
              <div>{content}</div>
          <button onClick={() => onSubmit(content)}>Submit</button>
      </div>
  );
};

Tôi đã thử nghiệm nó trong CodeSandbox của mình bằng cách cung cấp cho nó một onSubmitchức năng ghi lại nội dung đã gửi, nhưng bạn có thể làm bất cứ điều gì bạn cần với nó.

export default function App() {
  const initialContent = "Hello World";
  const onSubmit = (content: string) => {
    console.log("Submitted Content", content);
  };

  return (
    <div className="App">
      <TranslationArea
        initialContent={initialContent}
        onSubmit={onSubmit}
        title="Edit Text"
      />
    </div>
  );
}

Liên kết CodeSandbox