React.js学习（二）、三大属性state&props&ref
汲永嘉
一、 组件实例对象属性state
- 简单示例
<script type="text/babel">
//1.创建类式组件
class StateComponent extends React.Component {
constructor(props) {
super(props)
//初始化状态
this.state = { isGood: true }
//解决clickTitle中的this指向问题
this.clickTitle = this.clickTitle.bind(this)
}
render() {
console.log(this)
const { isGood } = this.state
// 点击事件使用onClick
return <h2 onClick={this.clickTitle}>组件实例对象属性——state使用,很{isGood ? '好用' : '不好用'}</h2>
}
//点击执行函数
clickTitle() {
console.log('点击了标题')
console.log(this)
const { isGood } = this.state
//更新状态
this.setState({ isGood: !isGood })
}
}
//2.渲染组件到页面
ReactDOM.render(<StateComponent />, document.getElementById('test'))
</script>
- 简写方式
<script type="text/babel">
//1.创建类式组件
class StateComponent extends React.Component {
//初始化状态
state = { isGood: true }
render() {
const { isGood } = this.state
// 点击事件使用onClick
return (<h2 onClick={this.clickTitle}>组件实例对象属性——state使用,很{isGood ? '好用' : '不好用'}</h2>)
}
//点击执行函数，自定义方法（使用监听函数）
clickTitle = () => {
const { isGood } = this.state
//更新状态
this.setState({ isGood: !isGood })
}
}
//2.渲染组件到页面
ReactDOM.render(<StateComponent />, document.getElementById('test'))
</script>
组件实例对象属性props
- 简单示例
<!-- 引入react核心库 -->
<script src="../js/react.development.js"></script>
<!-- 引入 react-dom 用于支持react操作DOM -->
<script src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<!-- 生产环境中不建议使用 -->
<script src="../js/babel.min.js"></script>
<!-- 引入prop-types 用于对组件标签属性进行限制 -->
<script src="../js/prop-types.js"></script>
<script type="text/babel">
//1.创建类式组件
class Person extends React.Component {
//构造器可以完全省略（开发中基本不使用）
constructor(props){
//构造器是否接受props，是否传递给super，取决于：是否希望在构造器中通过this访问props
super(props)
console.log(this.props)//如果不传给super，这里的this.props是空的
}
render() {
const { name, sex, age } = this.props
//props 是只读的不能修改
return (
<ul>
<li>姓名：{name}</li>
<li>性别：{sex}</li>
<li>年龄：{age}</li>
</ul>
)
}
}
// // 对标签属性进行类型、必要性的限制
Person.propTypes = {
name: PropTypes.string.isRequired, //限制name必传，切为字符串
sex: PropTypes.string, //限制sex为字符串
age: PropTypes.number, //限制age为数值
speak: PropTypes.func,//限制speak为函数
}
// //指定默认标签属性值
Person.defaultProps = {
sex: '男', //sex默认值
age: 18 //age默认值
}
//2.渲染组件到页面
/*传值方式一*/
ReactDOM.render(<Person name="晓果" age={18} sex="女" speak={speak} />, document.getElementById('test'))
ReactDOM.render(<Person name="晓果" age={25} sex="女" />, document.getElementById('test1'))
/*传值方式二*/
const person = { name: '晓果', age: 25, sex: "女" }
ReactDOM.render(<Person{...person} />, document.getElementById('test2'))
function speak() {
console.log('说话')
}
</script>
- 简写方式
<!-- 引入react核心库 -->
<script src="../js/react.development.js"></script>
<!-- 引入 react-dom 用于支持react操作DOM -->
<script src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<!-- 生产环境中不建议使用 -->
<script src="../js/babel.min.js"></script>
<!-- 引入prop-types 用于对组件标签属性进行限制 -->
<script src="../js/prop-types.js"></script>
<!-- 此处一定要写babel -->
<script type="text/babel">
//1.创建类式组件
class Person extends React.Component {
// // 对标签属性进行类型、必要性的限制
static propTypes = {
name: PropTypes.string.isRequired, //限制name必传，切为字符串
sex: PropTypes.string, //限制sex为字符串
age: PropTypes.number, //限制age为数值
speak: PropTypes.func,//限制speak为函数
}
// //指定默认标签属性值
static defaultProps = {
sex: '男', //sex默认值
age: 18 //age默认值
}
render() {
const { name, sex, age } = this.props
//props 是只读的不能修改
return (
<ul>
<li>姓名：{name}</li>
<li>性别：{sex}</li>
<li>年龄：{age}</li>
</ul>
)
}
}
//2.渲染组件到页面
/*传值方式一*/
ReactDOM.render(<Person name="晓果" age={18} sex="女" speak={speak} />, document.getElementById('test'))
ReactDOM.render(<Person name="晓果" age={25} sex="女" />, document.getElementById('test1'))
/*传值方式二*/
const person = { name: '晓果', age: 25, sex: "女" }
ReactDOM.render(<Person{...person} />, document.getElementById('test2'))
function speak() {
console.log('说话')
}
</script>
组件实例对象属性ref
- 字符串形式
<script type="text/babel">
//1.创建类式组件
class Person extends React.Component {
showData = () => {
const { input1 } = this.refs
console.log(input1.value)
}
showData2 = () => {
const { input2 } = this.refs
console.log(input2.value)
}
render() {
return (
<div>
<input ref="input1" type="text" placeholder="点击按钮提示数据" />
<button onClick={this.showData}>点我提示左侧的数据</button>
<input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" />
</div>
)
}
}
//2.渲染组件到页面
ReactDOM.render(<Person />, document.getElementById('test'))
</script>
- 回调函数形式
<script type="text/babel">
//1.创建类式组件
class Person extends React.Component {
showData = () => {
const { input1 } = this
console.log(input1.value)
}
showData2 = () => {
const { input2 } = this
console.log(input2.value)
}
changeData=(c)=>{
console.log(c)
}
render() {
return (
<div>
<input ref={c => this.input1 = c} type="text" placeholder="点击按钮提示数据" />
<button onClick={this.showData}>点我提示左侧的数据</button>
<input ref={c => this.input2 = c} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" /><br /><br />
{
/*
内联函数的形式定义的，在更新过程中会被执行两次（既调用this.setState()），切第一次传入参数是null（既c等于null），
然后第二次会参入参数DOM元素；但是无关紧要，正常开发中常使用这种方式
<button ref={c => { this.input3 = c; console.log('内联函数的形式', c) }}>内联函数的形式</button>
*/
}
<button ref={this.changeData}>类绑定函数的形式</button>
</div>
)
}
}
//2.渲染组件到页面
ReactDOM.render(<Person />, document.getElementById('test'))
</script>
- createRef形式
<script type="text/babel">
//1.创建类式组件
class Person extends React.Component {
/**
* React.crateRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点,
* 该容器只能存一个
*/
myRef = React.createRef()
myRef2 = React.createRef()
showData = () => {
console.log(this.myRef.current)
console.log(this.myRef.current.value)
}
showData2 = () => {
console.log(this.myRef2.current)
console.log(this.myRef2.current.value)
}
render() {
return (
<div>
<input ref={this.myRef} type="text" placeholder="点击按钮提示数据" />
<button onClick={this.showData}>点我提示左侧的数据</button>
<input ref={this.myRef2} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" />
</div>
)
}
}
//2.渲染组件到页面
ReactDOM.render(<Person />, document.getElementById('test'))
</script>
类似资料：