React中wanakana转换input后onChange不触发的state同步问题

Wanakana的bind()方法会直接修改输入框的DOM值，但不会触发React的onChange合成事件，导致受控组件的state无法同步更新。这就是输入"shi"转为"し"后，state只保留"sh"的原因——只有当再次输入触发原生输入事件时，才会同步之前的内容。

方案1：使用Wanakana的onConvert回调（推荐） #

利用Wanakana绑定选项中的onConvert回调，在每次转换完成后直接更新state，确保state与输入框内容同步：

import React from "react";
import "./style.css";
import { useRef, useState, useEffect } from 'react';
import * as wanakana from 'wanakana';

export default function App() {
  const [text, setText] = useState('');
  const inputRef = useRef(null);

  useEffect(() => {
    const inputElement = inputRef.current;
    if (!inputElement) return;

    // 绑定Wanakana并设置转换回调
    const unbind = wanakana.bind(inputElement, {
      onConvert: (convertedValue) => {
        setText(convertedValue);
      }
    });

    // 组件卸载时解绑，避免内存泄漏
    return () => unbind();
  }, []);

  return (
    <div>
      <h1>假名转换工具</h1>
      <p>当前输入：{text}</p>
      <input 
        ref={inputRef} 
        value={text} 
        onChange={(e) => setText(e.target.value)} // 兼容粘贴等非转换场景
      />
    </div>
  );
}

说明： #

• onConvert会在Wanakana完成罗马音到假名的转换后立即触发，把转换后的内容同步到state。
• 保留onChange事件，处理直接粘贴文本等Wanakana未触发转换的场景。
• 添加清理函数调用unbind()，组件卸载时解除Wanakana的绑定，避免内存泄漏。

方案2：监听原生input事件 #

如果不想依赖Wanakana的回调，可以监听输入框的原生input事件，每次内容变化时同步state：

import React from "react";
import "./style.css";
import { useRef, useState, useEffect } from 'react';
import * as wanakana from 'wanakana';

export default function App() {
  const [text, setText] = useState('');
  const inputRef = useRef(null);

  useEffect(() => {
    const inputElement = inputRef.current;
    if (!inputElement) return;

    // 绑定Wanakana
    wanakana.bind(inputElement);

    // 监听原生input事件同步state
    const syncState = () => {
      setText(inputElement.value);
    };
    inputElement.addEventListener('input', syncState);

    // 组件卸载时清理绑定和事件监听
    return () => {
      wanakana.unbind(inputElement);
      inputElement.removeEventListener('input', syncState);
    };
  }, []);

  return (
    <div>
      <h1>假名转换工具</h1>
      <p>当前输入：{text}</p>
      <input ref={inputRef} value={text} />
    </div>
  );
}

说明： #

• 原生input事件会在输入框内容发生任何变化时触发，包括Wanakana直接修改DOM值的情况。
• 同样需要在组件卸载时清理Wanakana绑定和事件监听，避免内存泄漏。

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