0

我是新来的反应，我正在构建一个文本实用程序应用程序，用户可以在他的文本中做一些事情，比如更改为大写，小写，翻译等。我目前被困在如何使用按钮翻译文本。我搜索了很多，但找不到任何有效的解决方案。

这是我的 TextForm 组件：

import counterpart from 'counterpart';
import Translate from 'react-translate-component';

counterpart.registerTranslations('hn',{
    textarea:{text}
});

counterpart.setLocale('en');


export default function TextForm(props) {
    const [text, setText] = useState('');
    const handleOnChange = (event) => {
        setText(event.target.value);
    }
    const handleUpChange = () => {
        let newText = text.toUpperCase();
        setText(newText);
    }
    const handleLoChange = () => {
        let newText = text.toLowerCase();
        setText(newText);
    }
    const handleTrChange = () => {
        <Translate content='textarea' component='textarea' />
        let newText = text
        setText(newText);

    }
    return (
        <>
            <div className="container my-3">
                <h1>{props.heading}</h1>
                <div className="mb-3">
                    <textarea className="form-control" id="myBox" value={text} onChange={handleOnChange} placeholder="Enter here" rows="8"></textarea>
                </div>
                <button className="btn btn-primary mx-1" onClick={handleUpChange}>Convert to Uppercase</button>
                <button className="btn btn-primary mx-1" onClick={handleLoChange}>Convert to Lowercase</button>
                <button className="btn btn-primary mx-1" onClick={handleTrChange}>Translate into Hindi</button>
            </div>
            <div className="container my-3">
                <h2>Your Text Summary</h2>
                <p>{text.split(' ').length} words and {text.length} characters</p>
                <p>{0.008 * text.split(' ').length} Minutes read</p>
                <h3>Preview</h3>
                <p>{text}</p>
            </div>
        </>
    )
}
4

1 回答 1

0

您可以创建一个自定义按钮组件，您只需在该组件中交出回调即可。按钮组件必须具有 useEffect 钩子，您可以在其中使用一些参数和条件调用其回调，然后您应该在任何您想要的地方设置状态（通常是本地 useState 钩子）。

于 2021-09-14T14:59:17.383 回答