HarmonyOS 鸿蒙Next字符文本反转
HarmonyOS 鸿蒙Next字符文本反转
TextInput组件输入字符后如何实现字符反转并输出
3 回复
let str = "Hello";
let reversedStr = str.split('').reverse().join('');
console.log(reversedStr); // 输出: olleH
// pages/index/index.ets
[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
[@State](/user/State) text: string = '';
@State reversedText: string = ‘’;
build() {
Column() {
TextInput({ placeholder: ‘请输入字符’, value: this.text })
.onChange((value: string) => {
this.text = value;
this.reversedText = this.reverseString(value);
})
.width(‘80%’)
.height(‘50px’)
.border({ width: 1, color: Color.Gray })
.padding(Edge.All, 10)
.margin(Edge.All, 20)
Text(<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.reversedText)
.fontSize(<span class="hljs-number"><span class="hljs-number">20</span></span>)
.margin(Edge.All, <span class="hljs-number"><span class="hljs-number">20</span></span>)
}.width(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>).height(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>).alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center);
}
reverseString(str: string): string {
return str.split(’’).reverse().join(’’);
}
}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>
