React基本使用 - props与state、React事件

1、props

父组件传过来的参数 可以使用组件类的defaultProps属性，设置默认的props值

// Actor.js import React,{Component} from 'react'; export default class Actor extends Component{ render(){ return ( <div> hi, {this.props.name} - {this.props.works} </div> ); } } Actor.defaultProps = { name:'小李子', works:'《泰坦尼克号》' }; // App.js import React,{Component} from 'react'; import Actor from './Actor'; export default class App extends Component{ render(){ return (<div><Actor/></div>); } }

2、state

组件自身的状态

// Father.js import React,{Component} from 'react'; export default class Father extends Component { constructor() { super(); this.state = { name: "官网", site: "https://www.csdn.net/m0_45315697" } } render() { return ( <div> <h2>{this.state.name}</h2> <a href={this.state.site}>{this.state.site}</a> </div> ); } } // App.js import React,{Component} from 'react'; import Father from './Father'; export default class App extends Component{ render(){ return (<div><Father/></div>); } }

props与state的异同点： 不同点：

state 的主要作用是用于组件保存、控制、修改自身的状态，在组件内部进行初始化，也可以在组件内部进行修改，但是在组件外部不能修改组件的 stateprops 的主要作用是让使用该组件的父组件可以传入参数来配置该组件，它是外部传进来的配置参数，组件内部无法控制也无法修改

相同点：

state 和 props 都可以决定组件的外观和显示状态。通常，props 做为不变数据或者初始化数据传递给组件，可变状态使用 state。

props与state结合使用的示例： 在父组件中设置 state， 在子组件中使用 props 将其传递到子组件上。 在 render 函数中, 设置 name 和 site 来获取父组件传递过来的数据。

import React,{Component} from 'react'; export default class Father extends Component { constructor() { super(); this.state = { name: "官网", site: "https://www.csdn.net/" } } render() { return ( <div> <Name name={this.state.name} /> <Link site={this.state.site} /> </div> ); } } class Name extends Component { render() { return ( <h1> {this.props.name} </h1> ); } } class Link extends Component { render() { return ( <a href={this.props.site}> {this.props.site} </a> ); } }

3、事件

React 事件绑定属性的命名采用驼峰命名法，而不是小写。如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法) import React,{Component} from 'react'; export default class App extends Component { clickFn(){ console.log(this); this.setState({ num:this.state.num+1 }); } render() { let { num,name,nickname } = this.state; return ( <div> <p>{num}</p> <p>{name}</p> <p>{nickname}</p> <button onClick={ this.clickFn }> 点击加一 </button> </div> ); } }

执行后报错如下： 这个报错是说不能读取未定义的属性setState,为什么会这样？ 我们看上面提示第32行有问题，调用setState()方法是组件内的this， 然而点击按钮时，clickFn()方法中的this已经不是组件里的this了。

解决方式一： 将事件函数修改为箭头函数 clickFn=()=>{ console.log(this); this.setState({ num:this.state.num+1 }); } 解决方式二： 在构造函数中，去手动绑定一下事件函数 constructor(props) { super(); this.state = { num: 3 , name: '小哪吒', nickname : '' }; this.clickFn = this.clickFn.bind(this);//手动绑定this }

注意：

事件函数调用时, 这样写 onClick={{事件函数名}}，函数名后不要带小括号类式组件中，定义构造函数时，一定要接受props，调用super()方法

多个state合并

import React,{Component} from 'react'; export default class App extends Component { state = { num:3, name:'小哪吒', nickname:'' } render() { let { num,name,nickname } = this.state; return ( <div> <p>{num}</p> <p>{name}</p> <p>{nickname}</p> <button onClick={ this.setState({ num:num+1, nickname:'小屁孩' }) }> 点击加一 </button> </div> ); } }

运行效果： 如上图，每次点击按钮时，数字加1，第一次点击时给nickname赋值"小屁孩"。

上一篇博客好友列表小案例https://blog.csdn.net/m0_45315697/article/details/107046335 给每个分组都添加一个点击事件

dl.js文件修改如下：

import React, { Component } from 'react'; export default class Dl extends Component { state = { isOpen: false } render() { // 子组件只能通过 props 来获取父组件传过来的数据 let { title, list } = this.props.value; let { isOpen } = this.state; return ( // 根据分组时获取的数据，分组中的列表内容(第二层循环)-列表组件 <div className={"friend-group" + (isOpen ? " expanded" : "")}> {/* 动态列表内容 */} <dt onClick={() => { this.setState({ isOpen: !isOpen }); }}> {title} </dt> { // 不建议使用index作为组件key值 list.map((item, index) => { return <dd key={index}>{item.name}</dd> }) } </div> ); } }

点击列表dt前： 点击列表dt后：