reactjs中不使用useState改变状态值

如何解决reactjs中不使用useState改变状态值

我使用 useState 来改变 textarea 的数量：

const [vancyValue,setVancyValue] = useState('');

在 onChange 中，我将数量倒入 vancyValue 中。

const handleChange = (event) => {
    setVancyValue(event.target.value);
};

按另一个按钮将字符添加到 Vance 字符串的末尾。

 const addVancy = () =>{
   // var myItemV = vancyValue;
   // myItemV += '$%A';
   // setVancyValue(myItemV);
   setVancyValue(vancyValue + '$%A');
 }

这样就搞定了，但是当我在teaxtarea中添加'$%A'后写一个值时，'$%A'的数量变成...... .

value={vancyValue.split('$%A').join('..............')}

当我更改显示值时，实际值也会更改。是否有意义？或者我在某个地方犯了一个错误。

<teaxtarea id="Text1" cols="60" rows="5"  placeholder="متن خود را وارد کنید!!"
   value={vancyValue.split('$%A').join('..............')}
   onChange={(e) => handleChange(e)} 
/>

注意：我只是想改变显示的值。

我想显示 而不是

的值

"$%A" 

价值

"....."

给用户，但原值不变。