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

目录

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


React实现字符串首字母大写

React实现字符串首字母大写、翻转字符串、获取用户选定的文本_第1张图片

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,它包含了两个状态变量inputTextoutputText,分别用于存储输入文本和输出文本。

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

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

  • handleInputChange函数用于处理输入框的变化事件,将输入的文本更新到inputText状态变量中。
  • handleButtonClick函数用于处理按钮的点击事件,将输入文本的首字母大写后的结果更新到outputText状态变量中。

在组件的返回部分,我们渲染了一个输入框、一个按钮和一个用于显示输出文本的段落。

  • 输入框通过value属性和onChange事件绑定到inputText状态变量,实现双向数据绑定。
  • 按钮的点击事件绑定到handleButtonClick函数。
  • 输出文本通过outputText状态变量进行显示。

当用户在输入框中输入文本并点击按钮时,首字母大写的结果将显示在输出段落中。

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

用户输入的文本将在输出段落中以首字母大写的形式显示出来。

React实现翻转字符串

React实现字符串首字母大写、翻转字符串、获取用户选定的文本_第2张图片

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

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

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

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

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

  • handleInputChange函数用于处理输入框的变化事件,将输入的文本更新到inputText状态变量中。
  • handleButtonClick函数用于处理按钮的点击事件,将输入文本翻转后的结果更新到reversedText状态变量中。

在组件的返回部分,我们渲染了一个输入框、一个按钮和一个用于显示翻转后文本的段落。

  • 输入框通过value属性和onChange事件绑定到inputText状态变量,实现双向数据绑定。
  • 按钮的点击事件绑定到handleButtonClick函数。
  • 翻转后的文本通过reversedText状态变量进行显示。

当用户在输入框中输入文本并点击按钮时,翻转后的结果将显示在输出段落中。

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

用户输入的文本将在输出段落中以翻转后的形式显示出来。

React获取用户选定的文本

React实现字符串首字母大写、翻转字符串、获取用户选定的文本_第3张图片

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

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

然后,我们定义了一个函数组件App,它包含了一个textRef引用,用于引用需要获取选定文本的元素。

我们使用useRef钩子函数来创建textRef引用。

接下来,我们定义了一个事件处理函数handleSelection,用于获取用户选定的文本。

在组件的返回部分,我们渲染了一个段落和一个按钮。

  • 段落通过ref属性绑定到textRef引用,使得我们可以在事件处理函数中获取到该元素。
  • 按钮的点击事件绑定到handleSelection函数。

当用户在段落中选定一段文本并点击按钮时,我们通过window.getSelection()方法获取用户选定的文本,并将其弹出显示在一个警告框中。

这个案例的实现思路是,通过使用ref属性将需要获取选定文本的元素与textRef引用关联起来。然后,在事件处理函数中,通过window.getSelection()方法获取用户选定的文本,并进行后续处理,例如弹出警告框显示选定的文本。

当用户在段落中选定文本并点击按钮时,将弹出一个警告框显示用户选定的文本。

持续学习总结记录中,回顾一下上面的内容:
React实现字符串首字母大写、翻转字符串、获取用户选定的文本的方法?

你可能感兴趣的:(React,案例\效果,react.js,javascript,前端)