事件对象

可以通过事件程序的参数获取事件对象
React中的事件对象为合成事件
合成对象：兼容所有浏览器

使用事件对象e中的e.preventDefault()方法阻止a标签跳转

class Hello extends React.Component {// 创建事件函数handleClick (e) {// 阻止浏览器的默认行为e.preventDefault()}render () {// 注册点击事件(调用创建的事件函数)return <a href="https://xuexi.boxuegu.com/construe.html?id=35099" onClick={this.handleClick}>hello</a>}
}

有状态组件和无状态组件

函数组件又叫无状态组件，类组件又叫有状态组件
状态就是“数据”
函数组件没有自己的状态，只负责数据静态展示
类组件有自己的状态，负责更新UI

state的基本使用
状态即数据，是组件内部的私有数据，只能在组件内部使用
state的值是对象，表示一个组件中可以有多个数据

写法：

class Hello extends React.Component {// 初始化stateconstructor () {super()// 初始化statethis.state = {count: 0}}render () {// 使用statereturn <button>{this.state.count}</button>}
}

下面是简化写法：

class Hello extends React.Component {// 简化语法初始化statestate = {count: 0}render () {// 使用statereturn <button>{this.state.count}</button>}
}

使用setState改变state中的值

ps：这里需要使用箭头函数，使用普通函数会出现this指向问题

class Hello extends React.Component {// 简化语法初始化statestate = {count: 0}// 按钮单击事件add = () => {this.setState({count: this.state.count + 1})}render () {// 使用statereturn <button onClick={this.add}>{this.state.count}</button>}
}

解决事件绑定this指向问题

1. 箭头函数

class Hello extends React.Component {// 简化语法初始化statestate = {count: 0}// 按钮单击事件add () {this.setState({count: this.state.count + 1})}render () {// 使用statereturn <button onClick={() => {this.add()}}>{this.state.count}</button>}
}

2. Function.prototype.bind()
   bind会创建一个新的函数，然后改变它的this指向
   详细请见：链接

class Hello extends React.Component {// 创建值stateconstructor () {super()// 使用Function.prototype.bind()改变this指向this.add = this.add.bind(this)this.state = {count: 0}}// 按钮单击事件add () {this.setState({count: this.state.count + 1})}render () {// 使用statereturn <button onClick={this.add}>{this.state.count}</button>}
}

3. 利用箭头函数形式的class实例（上）

表单处理

受控组件：受控组件，其值受到react控制的表单元素
HTML中的表单元素是可输入的，也就是有自己的可变状态
而，React中可变状态通常保存在state中，并且只能通过setState()方法来修改
React将state与表单元素value绑定到一起，有state的值来控制表单元素的值

class Hello extends React.Component {// 创建值statestate = {count: ''}// 创建绑定事件setChange =  e => {this.setState({count: e.target.value})}render () {// 双向绑定value的值return <div><input onChange={this.setChange} type="text" value={this.state.count} /></div>}
}

受控组件：文本框，富文本框，下拉框

富文本框

class Hello extends React.Component {// 创建值statestate = {count: ''}// 创建绑定事件setChange =  e => {this.setState({count: e.target.value})}render () {// 双向绑定valuereturn <div><textarea onChange={this.setChange} value={this.state.count}></textarea></div>}
}

下拉选择框

class Hello extends React.Component {// 创建值statestate = {count: 4}// 创建绑定事件setChange = e => {this.setState({count: e.target.value})}render() {// 双向绑定valuereturn <div><select onChange={this.setChange} value={this.state.count}><option value="1">北京</option><option value="2">上海</option><option value="3">南京</option><option value="4">武汉</option></select></div>}
}

复选框

class Hello extends React.Component {// 创建值statestate = {count: true}// 创建绑定事件setChange = e => {this.setState({count: e.target.checked})}render() {// 双向绑定valuereturn <div><input type="checkbox" checked={this.state.count} onChange={this.setChange}/></div>}
}

多表单元素优化步骤

1. 给表单元素添加name属性，名称与state相同

2. 根据表单元素类型获取对应值

3. 在change事件处理程序通过[name]来修改对应的state

class Hello extends React.Component {// 创建值statestate = {count: true,textFr: '123',textTt: '456'}// 创建绑定事件setChange = e => {// 获取当前的DOM对象const target = e.target// 根据类型获取值const value = target.type === 'checkbox'? target.checked: target.value// 获取nameconst name = target.namethis.setState({[name]: value})}render() {// 双向绑定valuereturn <div><input type="text" name="textFr" value={this.state.textFr} onChange={this.setChange} /><input type="checkbox" name="count" checked={this.state.count} onChange={this.setChange}/><textarea type="text" name="textTt" value={this.state.textTt} onChange={this.setChange}></textarea></div>}
}

组件的props

组件是封闭的，要接收外部数据应该通过props来实现
props的作用：传递给页面数据

props的特点：
1.只读
2.可以传递任意的数据
3.注意：使用类组件的时候，如果写了构造函数应该将props传递给super，否则无法在constructor中使用

函数组件：

function App (props) {console.log(props)return (<div>这是跟组件{props.name} {props.age}</div>)
}// 渲染组件以自定义属性传值
ReactDOM.render(<App name="张三" age={19} />, document.getElementById('root'))

类组件：

class App extends React.Component {constructor (props) {// 推荐将props传递给supersuper(props)}render () {return (<div>这是跟组件{this.props.name} {this.props.age}</div>)}}// 渲染组件以自定义属性传值
ReactDOM.render(<App name="张三" age={19} />, document.getElementById('root'))

组件通讯的三种方式
1.父组件=> 子组件
使用props为子组件传值

// 父组件
class Parent extends React.Component {state = {// 要传递的值valuevalue: '这是父亲传递的值'}render() {// 使用自定义属性传值return (<div>父组件的儿子↓<Child value={this.state.value} /></div>)}
}// 子组件使用props接收
const Child = props => {return <p>子组件获取：{props.value}</p>
}// 渲染组件以自定义属性传值
ReactDOM.render(<Parent />, document.getElementById('root'))

2.子组件=> 父组件
利用回调函数，父组件提供回调，子组件调用，将要传递的数据作为回调函数的参数
1.父组件提供一个回调函数
2.将该函数作为属性的值，传递给子组件
3.子组件通过props调用回调函数
4.将子组件的值通过回调函数的参数传递给父组件

// 父组件
class Parent extends React.Component {state = {// 父组件本身的值value: ''}// getChildMsg = $ => {this.setState({value: $})}render() {// 使用自定义属性传值一个回调函数给子组件return (<div><p>这是从儿子组件获取到的值：{this.state.value}</p>父组件的儿子↓<Child getMsg={this.getChildMsg}/></div>)}
}// 子组件使用props接收
class Child extends React.Component {state = {// 子组件需要传递的值msg: '儿子组件传递的值'}// 调用父组件的回调函数，将值通过回调函数的方式传递给父组件handClick = () => {this.props.getMsg(this.state.msg)}render () {return <p>子组件获取：<button onClick={this.handClick}>点击，传值</button></p>}
}// 渲染组件以自定义属性传值
ReactDOM.render(<Parent />, document.getElementById('root'))

3.兄弟之间
就像vuex一样，在父组件定义变量和方法，然后使用父向子传值传递给儿子组件

// 父组件
class Parent extends React.Component {state = {// 父组件的值count: 0}// 父组件的方法onInCick = _ => {this.setState({count: this.state.count + 1})}render() {// 使用自定义组件传递给儿子1，儿子2组件return (<div>儿子1：<Child1 count={this.state.count}/>儿子2：<Child2 onInCick={this.onInCick}/></div>)}
}// 子组件使用props接收
class Child1 extends React.Component {render () {return <p>子组件1获取：{this.props.count}</p>}
}// 子组件使用props接收
class Child2 extends React.Component {render () {return <button onClick={this.props.onInCick}>是儿子组件+1</button>}
}// 渲染组件以自定义属性传值
ReactDOM.render(<Parent />, document.getElementById('root'))