react基础1（导入组件，绑定属性，引入图片，react双向绑定）注明：vue中使用ref调用时写法为this.$refs，而react中调用时为this.refs

1、组件的写法

组件的写法
1.import React from ‘react’;
2.声明当前组件的类
class Rindex extends React.Component{
}
3.暴露出去 export default name;
4.写类里面render 渲染方法
render(){
return (标签)
多个标签？？？ 单个标签
}
5.在组件里面声明constructor (构造函数)
super() 指继承父类里面相关属性和方法
6.声明数据
React 组件里面声明数据在构造函数 里面 的state属性里面去声明
7.数据的渲染 { es6里面的代码块 }

2.绑定属性

state中写入数据，在{}代码中引入

class Bute extends Component {
constructor() {
super();
this.state = {
title: "绑定title属性",
color: "fontcolor",
w: 100,
h: 100,
marleft: 100,
style: {
width: "100px",
height: "100px",
marginLeft: "100px"
}
};
}
render() {
return (
<div>
<span>属性操作组件</span>
<div title={this.state.title}></div>
{/* 特殊的属性   和js 代码冲突
class   ----className

*/}
<div className="fontcolor">
修改颜色
</div>
<div className={this.state.color}>
修改颜色
</div>
{/* 由于 for 在 JavaScript 中是保留字，所以 React 元素中使用了 htmlFor 来代替。
lable标签中的for用于for 属性规定 label 与哪个表单元素绑定。
如果使用了for绑定了lable里边的内容，则它包裹元素的事件也会给lable加上，即为显式绑定，不使用for即为隐式绑定，仅仅作为一个包裹元素
*/}
<label htmlFor="lable">label</label>
{/* 绑定元素的css样式 */}
<div style={{ width: '100px', height: "100px", marginLeft: "100px" }}>
直接绑定元素的css
</div>
<div style={{ width: this.state.w + 'px', height: this.state.h + "px", marginLeft: this.state.marleft + "px" }}>
直接绑定元素的css
</div>
{/* 动态绑定元素的css样式 */}
<div style={this.state.style}>
直接绑定元素的css
</div>
</div>
);
}
}

tips:
由于 for 在 JavaScript 中是保留字，所以 React 元素中使用了 htmlFor 来代替。 lable标签中的for用于for 属性规定 label 与哪个表单元素绑定。
如果使用了for绑定了lable里边的内容，则它包裹元素的事件也会给lable加上，即为显式绑定，不使用for即为隐式绑定，仅仅作为一个包裹元素

3、引入图片的方法

第一种：
先导入：import img from ‘…/assets/image/1.jpg’
再使用（直接使用）：< img src={img} alt="" />
第二种：
直接使用 require 请求，require（“这里写图片路径”）
<img src={require("…/assets/image/timg.jpg")} alt="" />

一个引用数据的小案例：

class ImageArray extends Component {
constructor(props) {
super(props);
this.state = {
msg: [1, 2, 3, 4],
ele: [<span>1</span>, <span>2</span>, <span>3</span>, <span>4</span>],
stus: [
{
name: "张三",
age: 18,
hobby: [
{ name: "篮球" },
{ name: "乒乓球" },
{ name: "棒球" },
{ name: "羽毛球" }
]
},
{
name: "李四",
age: 18,
hobby: [
{ name: "篮球" },
{ name: "乒乓球" },
{ name: "棒球" },
{ name: "羽毛球" }
]
}
]
};
}
render() {
return (
<div>
{/* 图片的引入和数据循环 */}
<img src={img} alt="" />
<img src={require("../assets/image/timg.jpg")} alt="" />
<ul>
{
this.state.msg.map((val, key) => {
return (
<li key={key}>{val}</li>
)
})
}
{
this.state.ele.map((val, key) => {
return (
<li key={key}>
{val}
</li>
)
})
}
{
this.state.stus.map((val, key) => {
return (
<li key={key}>
<span>{val.name}</span>
<span>{val.age}</span>
<ul>
{
val.hobby.map((v, k) => {
return (
<li key={k}>{v.name}</li>
)
})
}
</ul>
</li>
)
})
}
</ul>
</div>
);
}
}

案例效果图：

• 1
• 2
• 3
• 4
• 1
• 2
• 3
• 4
• 张三18
  篮球
  乒乓球
  棒球
  羽毛球
• 李四18
  篮球
  乒乓球
  棒球
  羽毛球

react不同与vue，没有V-model，只能手动实现双向绑定，以下为实现方法

事件绑定的三种方式：

**1、在引用方法时加上bind(this),可以获取到this.setState()的,否则即为undefined
点击事件
2、在构造函数里面传递this，也就是在构造函数中加入
this.getData = this.getData.bind(this);
3、使用ES6的箭头函数保持this指针前后指向一致；
getInfo = () => {
console.log(this.state.msg);
}

通过setstate()方法更新数据：
使用API setState 记住：state 是只读，只能使用API更新数据

updateData = () => {
this.setState({
msg: "我是修改之后的"
});
}

传递参数：在方法的末尾，写入参数到bind函数，从而传递数据，在这里要注意，bind里的第一个参数必须为this,写入其他参数的话，第一个参数会被this覆盖。
方法：

sendData = (x, y, z) => {
console.log(x, y, z);
}

dom:

{/* 执行事件  传参 */}
<button onClick={this.sendData.bind(this, 1, 2, 3)}>传递参数</button>

获取事件执行对象的两种方法：
1、e.target:注意：由于引用方法时后缀有bind(this,1)；所以这里getEvent的第一个参数就是bind中传入的1，所以引入event时要靠后一位。

getEvent = (e, event) => {
let ele=event.target
console.log(ele.getAttribute("data-index"));

//原生js  写的事件执行对象也可以用
// let ev = window.event;
// console.log(ev.target);
}

dom:

{/*  执行事件参数*/}
<button onClick={this.getEvent.bind(this, 1)} data-index="1">获取事件的参数</button>

2、使用ref获取dom元素（注明：vue中使用ref调用时写法为this.$refs，而react中调用时为this.refs）
方法：

getDom=()=>{
//this.refs
console.log(this.refs.block.innerHTML);
}

调用：

{/* react  中获取dom元素  ref */}
<button onClick={this.getDom}>点击获取dom元素</button>
<div ref="block">我是带有ref属性的元素</div>

react实现数据双向绑定的方法：
以输入文本框为例，在这里写了两个方法：

//表单元素的操作
getInput(){
//console.log(this.refs.name.value);
console.log(this.state.text);
}
//手动实现  数据双向绑定
changeData(e){
let val=e.target.value;
this.setState({
text:val
//这里绑定onchange事件，调用state的API，setstate，处理了实时更新后台数据的功能
});
}

dom:

{/*表单事件    元素的值问题 */}
<input type="text" ref="name" value={this.state.text}   onChange={this.changeData.bind(this)}/>
<button onClick={this.getInput.bind(this)}>获取input的值</button>

以下附上源码：

import React, { Component } from 'react';
class Event extends Component {
constructor(props) {
super(props);
this.state = {
msg: "点击输出msg",
text:"我是文本框的值"
};
//绑定this    替换
this.getData = this.getData.bind(this);
}
//1.事件绑定执行的方法
getMsg() {
console.log("执行方法");
//在该方法里面去调用当前组件的相关东西
console.log(this.state.msg);
}
//2. 在构造函数里面传递this
getData() {
console.log("执行方法");
console.log(this.state.msg);
}
//3.事件的第三种绑定方式
getInfo = () => {
console.log(this.state.msg);
}

//修改数据
updateData = () => {
//使用API  setState  记住：state  是只读
this.setState({
msg: "我是修改之后的"
});
}
//传递参数
sendData = (x, y, z) => {
console.log(x, y, z);
}// 事件的执行对象
getEvent = (e, event) => {
/* let ele=event.target
console.log(ele.getAttribute("data-index")); */

//原生js  写的事件执行对象也可以用
let ev = window.event;
console.log(ev.target);
}

//获取dom元素
getDom=()=>{
//this.refs
console.log(this.refs.block.innerHTML);
}
//表单元素的操作
getInput(){
//console.log(this.refs.name.value);
console.log(this.state.text);
}
//手动实现  数据双向绑定
changeData(e){
let val=e.target.value;
this.setState({
text:val
});
}
render() {
return (
<div>
<span>React 的 事件</span><br></br>
{/* 事件的方法直接去类里面声明 */}
<button onClick={this.getMsg.bind(this)}>点击事件</button>
{/* 事件的第二种写法  在构造函数里面传递this */}
<button onClick={this.getData}>点击事件</button>
{/* 事件的第三种  直接使用es6 */}
<button onClick={this.getInfo}>点击事件</button>

{/* react修改数据 */}
<button onClick={this.updateData}>修改数据</button>

{/* 执行事件  传参 */}
<button onClick={this.sendData.bind(this, 1, 2, 3)}>传递参数</button>
{/*  执行事件参数*/}
<button onClick={this.getEvent.bind(this, 1)} data-index="1">获取事件的参数</button>

{/* react  中获取dom元素  ref */}
<button onClick={this.getDom}>点击获取dom元素</button>
<div ref="block">我是带有ref属性的元素</div>

{/*表单事件    元素的值问题 */}
<input type="text" ref="name" value={this.state.text}   onChange={this.changeData.bind(this)}/>
<button onClick={this.getInput.bind(this)}>获取input的值</button></div>
);
}
}

export default Event;