React学习——组件三大属性

最新推荐文章于 2023-07-09 11:03:44 发布

Memorial*

最新推荐文章于 2023-07-09 11:03:44 发布

阅读量337

点赞数 1

分类专栏： web前端

本文链接：https://blog.csdn.net/qq_38360675/article/details/107201575

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.state

state是组件对象最重要的属性, 值是对象(可以包含多个数据)
组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)

案例：

需求：自定义组件，功能如下： 1.显示h2标题，初始文本为：你喜欢我 2.点击标题更新为：我喜欢你

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>

<div id="example"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">
    /*
          需求：自定义组件，功能如下：
            1.显示h2标题，初始文本为：你喜欢我
            2.点击标题更新为：我喜欢你
        * */
    //1.定义组件
    class Like extends React.Component{
        constructor(props) {
            super(props);
            //初始化
            this.state ={
                isLikeMe:false
            }
            //将新增方法中的this强制绑定为组件对象
            this.handleClick = this.handleClick.bind(this)
        }

        //新增添方法
        handleClick(){
            //得到状态并取反
            const isLikeMe = !this.state.isLikeMe
            //更新状态
            this.setState({isLikeMe})
        }

        render(){
            const {isLikeMe} = this.state
            return <h2 onClick={this.handleClick}>{isLikeMe?'你喜欢我':'我喜欢你'}</h2>
        }
    }
    //2.渲染组件标签
    ReactDOM.render(<Like/>,document.getElementById('example'))
</script>

</body>
</html>

编码操作

1.初始化状态

constructor (props) {

super(props)

this.state = {

stateProp1 : value1,

stateProp2 : value2

}

2.读取某个状态值

this.state.statePropertyName

3.更新状态---->组件界面更新

this.setState({

stateProp1 : value1,

stateProp2 : value2

})

知识点：

1.onClick：onclick 事件会在元素被点击时发生，当按钮被点击时执行Javascript代码，用在事件监听上

<h2 onClick={this.handleClick}>{isLikeMe?'你喜欢我':'我喜欢你'}</h2>

2.bind方法

this.handleClick.bind(this)的返回值是一个新的函数，其实是将this.handleClick拷贝了一份，他们两个已经没有了任何关系，已经不在同一个内存地址中了，isLikeMe返回了True。

2.props

需求: 自定义用来显示一个人员信息的组件
  1). 姓名必须指定
  2). 如果性别没有指定, 默认为男
  3). 如果年龄没有指定, 默认为18

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05_component_props</title>
</head>
<body>
<div id="example1"></div>
<div id="example2"></div>


<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">
    /*
需求：自定义用来显示一个人员信息的组件，效果如页面。说明
1）.如果性别没有指定，默认为男
2）.如果年龄没有指定，默认为18
*/
    //1.定义组件
   /* function Person(props) {

        return (
            <ul>
                <li>姓名:{props.name}</li>
                <li>年龄:{props.age}</li>
                <li>性别:{props.sex}</li>
            </ul>
        )
    }*/
   class Person extends React.Component{
       render(){
           return (
               <ul>
               <li>姓名:{this.props.name}</li>
               <li>年龄:{this.props.age}</li>
               <li>性别:{this.props.sex}</li>
           </ul>
           )
       }
   }
    //指定属性默认值
    Person.defaultProps={
        sex: '男',
        age: 18
    }
    //指定属性值的类型和必要性
    Person.propTypes={
        name:PropTypes.string.isRequired,
        age:PropTypes.number,
    }
    //2.渲染组件标签
    const p1 = {
        name:'Tom',
        age:19,
        sex:'女'
    }
    /*
    ...的作用
    1.打包
    2.解包
     */

    //ReactDOM.render(<Person name={p1.name} age={p1.age} sex={p1.sex}/>,document.getElementById('example1'))
    ReactDOM.render(<Person {...p1}/>,document.getElementById('example1'))

    const p2={
        name:'JACK',
    }
    ReactDOM.render(<Person name={p2.name}/>,document.getElementById('example2'))
</script>
</body>
</html>

理解：

每个组件对象都会有props(properties的简写)属性
组件标签的所有属性都保存在props中

作用：

通过标签属性从组件外向组件内传递变化的数据
注意: 组件内部不要修改props数据

编码操作

1.内部读取某个属性值

this.props.propertyName

2.对props中的属性值进行类型限制和必要性限制

Person.propTypes = {

name: React.PropTypes.string.isRequired,

age: React.PropTypes.number.isRequired

}

3.扩展属性: 将对象的所有属性通过props传递

<Person {...person}/>

4.默认属性值

Person.defaultProps = {

name: 'Mary'

}

5.组件类的构造函数

constructor (props) {

super(props)

console.log(props) // 查看所有属性

}

3.refs-event

需求: 自定义组件, 功能说明如下: 1. 点击按钮, 提示第一个输入框中的值 2. 当第2个输入框失去焦点时, 提示这个输入框中的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06_component_refs_event</title>
</head>
<body>
<div id="example1"></div>
<div id="example2"></div>


<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
    /*
    * 需求: 自定义组件, 功能说明如下:
        2. 点击按钮, 提示第一个输入框中的值
        3. 当第2个输入框失去焦点时, 提示这个输入框中的值
    */
    //1.定义组件
    class MyComponent extends React.Component{


        constructor(props) {
            super(props);
            this.showInput=this.showInput.bind(this)
        }

        showInput(){
            const input = this.refs.content
            //alert(input.value)
            alert(this.input.value)
        };
        handleBlur(event){
            alert(event.target.value)
        }
        render(){
            return(
                <div>
                    <input type="text" ref="content"/>&nbsp;&nbsp;
                    <input type="text" ref={input => this.input = input}/>&nbsp;&nbsp;
                    <button onClick={this.showInput}>提示输入</button>&nbsp;&nbsp;
                    <input type="text" placeholder="失去焦点提示内容" onBlur={this.handleBlur}/>
                </div>
            )
    }
    }
    //2.渲染组件标签
    ReactDOM.render(<MyComponent/>,document.getElementById('example1'))
</script>
</body>
</html>

Memorial*

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React学习——组件三大属性

1.statestate是组件对象最重要的属性, 值是对象(可以包含多个数据) 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)案例：需求：自定义组件，功能如下： 1.显示h2标题，初始文本为：你喜欢我 2.点击标题更新为：我喜欢你<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>test&
复制链接

扫一扫