React组件的三大属性 state props refs
state(最重要的属性)
-
state是组件对象最重要的属性,其值是对象,即可以包含多个数据
-
组件相当于一个“状态机”,可以通过更新组件的state来更新对应的页面的显示(重新进行组件渲染)
-
使用
//初始化 constructor(props){ super(props) this.state = { //this是一个组件对象 stateProp1: value1, stateProp2: value2 } } // 读取第一个个状态值 this.state.stateProp1 // 更新状态,组件界面更新 this.setState({ stateProp1: value1, stateProp2: value2 })
props 属性
每个组件对象都会有props(properties的简写)属性,组件标签的所有属性都保存在props中,所有组件标签的属性的集合对象
作用:通过标签属性从组件外向组件内传递变化的数据 ,注意: 组件内部不要修改props数据
父子传值
使用:
-
// 1.定义组件 function Person(props) { return ( <ul> <li>姓名:{props.name}</li> <li>年龄:{props.age}</li> <li>性别:{props.sex}</li> </ul> ) } // 2.渲染组件标签 const p1 = { name: 'lina', age: 18, sex: '女' } ReactDOM.render(<Person name={p1.name} age={p1.age} sex={p1.sex}/>, document.getElementById('person'))
refs 属性
ref用于标识组件内部某个元素
refs 是标识集合
使用:
//1、先定义组件 class InputComp extends React.Component { constructor(props) { super(props) //先对自定义函数进行bind操作 this.showInput = this.showInput.bind(this); this.handleBlur = this.handleBlur.bind(this); } showInput(event) { console.log(this); alert(this.inputVal.value); } handleBlur(event) {//利用所有的事件均有一个event属性 alert(event.target.value); } render() { return( //this.inputVal=input 将当前input绑定到组件对象上。input代表 //当前这个input元素 <div> <input type="text" ref={input => this.inputVal=input}/> <button onClick={this.showInput}>点击获取值</button> <input type="text" placeholder="失去焦点提示内容" onBlur={this.handleBlur}/> </div> ) } } //2、渲染组件标签 ReactDOM.render(<InputComp />,document.getElementById('text1'));