React实现字符串首字母大写、翻转字符串、获取用户选定的文本

本文介绍: 当用户在输入框中输入文本并点击按钮时，首字母大写的结果将显示在输出段落中。当用户在输入框中输入文本并点击按钮时，翻转后的结果将显示在输出段落中。

请添加图片描述

import React, { useState } from 'react'

function App() {
  const [inputText, setInputText] = useState('')
  const [outputText, setOutputText] = useState('')

  const handleInputChange = e => {
    setInputText(e.target.value)
  }

  const handleButtonClick = () => {
    const capitalizedText = inputText.charAt(0).toUpperCase() + inputText.slice(1)
    setOutputText(capitalizedText)
  }

  return (
    <div>
      <input type="text" value={inputText} onChange={handleInputChange} />
      <button onClick={handleButtonClick}>转换</button>
      <p>结果: {outputText}</p>
    </div>
  )
}

export default App

在这个React的案例中，我们首先导入了React和useState钩子函数。

然后，我们定义了一个函数组件App，它包含了两个状态变量inputText和outputText，分别用于存储输入文本和输出文本。

我们使用useState钩子函数来创建这两个状态变量，并通过数组解构赋值的方式获取它们的当前值和更新函数。

接下来，我们定义了两个事件处理函数：

这个案例的实现思路是，通过事件处理函数获取用户输入的文本，并使用JavaScript的字符串方法charAt和slice来将首字母大写。然后，将首字母大写后的结果更新到输出文本的状态变量中，从而实现字符串首字母大写的效果。

import React, { useState } from 'react'

function App() {
  const [inputText, setInputText] = useState('')
  const [reversedText, setReversedText] = useState('')

  const handleInputChange = e => {
    setInputText(e.target.value)
  }

  const handleButtonClick = () => {
    const reversed = inputText.split('').reverse().join('')
    setReversedText(reversed)
  }

  return (
    <div>
      <input type="text" value={inputText} onChange={handleInputChange} />
      <button onClick={handleButtonClick}>翻转</button>
      <p>结果: {reversedText}</p>
    </div>
  )
}

export default App

然后，我们定义了一个函数组件App，它包含了两个状态变量inputText和reversedText，分别用于存储输入文本和翻转后的文本。

我们使用useState钩子函数来创建这两个状态变量，并通过数组解构赋值的方式获取它们的当前值和更新函数。

这个案例的实现思路是，通过事件处理函数获取用户输入的文本，并使用JavaScript的字符串方法split、reverse和join来实现字符串的翻转。然后，将翻转后的结果更新到输出文本的状态变量中，从而实现字符串翻转的效果。

import React, { useRef } from 'react'

function App() {
  const textRef = useRef(null)

  const handleSelection = () => {
    const selectedText = window.getSelection().toString()
    alert(`选定的文字: ${selectedText}`)
  }

  return (
    <div>
      <p ref={textRef}>思维决定行为，行为决定结果，结果决定位置，位置又决定了眼界、思维、资源、认知一样，一切兼为因果循环关系。</p>
      <button onClick={handleSelection}>选定文字</button>
    </div>
  )
}

export default App