如何在点击时更改反应组件的状态？

当您在处理单页应用程序时，更改 React 组件的状态很有用，它只是为用户替换现有组件的内容，而无需重新加载网页。

我们必须在构造函数中设置初始状态值，并设置点击元素的点击事件处理程序，导致状态改变。然后将函数传递给单击处理程序，并使用setState更改函数内部组件的状态。用于改变状态的setState函数 直接或使用回调方法，如下所述。

句法：

this.setState({ stateName : new-state-value})

this.setState(st => {
  st.stateName = new-state-value
})

示例 1：此示例说明如何在单击时更改组件的状态。

index.js：

应用程序.js：

Javascript

import React, { Component } from 'react'
 
class App extends Component {
  constructor(props){
    super(props)
     
    // Set initial state
    this.state = {msg : 'Hi, There!'}
     
    // Binding this keyword
    this.handleClick = this.handleClick.bind(this)
  }
 
  handleClick(){
   
    // Changing state
    this.setState({msg : 'Welcome to the React world!'})
  }
   
  render(){
    return (
      

        
Message :
         
 
{this.state.msg}
 
 
         
        {/* Set click handler */}
        
          Click here!
        
      
    )
  }
}
 
export default App

输出：

示例 2：

index.js：

Javascript

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
 
ReactDOM.render(, document.querySelector('#root'))

应用程序.js：

Javascript

import React, { Component } from 'react'
 
class App extends Component {
  static defaultProps = {
    courseContent : [
      'JSX', 'React Props', 'React State',
      'React Lifecycle Methods', 'React Event Handlers',
      'React Router', 'React Hooks', 'Readux',
      'React Context'
    ]
  }
   
  constructor(props){
    super(props)
     
    // Set initial state
    this.state = {msg : 'React Course', content:''}
     
    // Binding this keyword
    this.handleClick = this.handleClick.bind(this)
  }
 
  renderContent(){
    return (
      

        {this.props.courseContent.map(content => (
          
{content}
        ))}
      
    )
  }
 
  handleClick(){
   
    // Changing state
    this.setState({
      msg : 'Course Content',
      content : this.renderContent()
    })
  }
   
  render(){
    return (
      

        
Message :
         
 
{this.state.msg}
 
 
         
 
{this.state.content}
 
 
         
        {/* Set click handler */}
        
           Click here to know contents!
        
      
    )
  }
}
 
export default App

输出：