芝士
【事件绑定的三种方法】
在以类继承的方式定义的组件中，为了能方便地调用当前组件的其他成员方法或属性（如：this.state），通常需要将事件处理函数运行时的 this 指向当前组件实例。
绑定事件处理函数this的几种方法：
//第一种方法：
//写在组件中
run(){
alert(this.state.name)
}
<button onClick={this.run.bind(this)}>按钮</button> //第二种方法：
//构造函数中改变
this.run = this.run.bind(this);
run(){
alert(this.state.name)
}
<button onClick={this.run>按钮</button> //第三种方法：
//箭头函数运用
run=()=> {
alert(this.state.name)
}
<button onClick={this.run>按钮</button>
【通过ref获取DOM节点】
class Test extends React.Component{
constructor(props){
super(props);
this.state={
name:'liyang'
}
}
change=(value)=>{
//这里实现获取button标签的value属性值
let val =this.refs.myname.value;
this.setState({
name:val,
})
}
render(){
return(
<div>
<p>myname is : {this.state.name}</p>
<button ref='myname' onClick={this.change} value='123'>click</button>
</div>
)
}
}
ReactDOM.render(<Test />, document.getElementById('root'));
【约束性和非约束性组件】
非约束性组: <input type="text" defaultValue="a" /> 这个 defaultValue 其实就是原生DOM中的 value 属性。
这样写出的来的组件，其value值就是用户输入的内容，React完全不管理输入的过程。
约束性组件： <input value={this.state.username} type="text" onChange={this.handleUsername} />
这里，value属性不再是一个写死的值，他是 this.state.username, this.state.username 是由 this.handleChange 负责管理的。
这个时候实际上 input 的 value 根本不是用户输入的内容。而是onChange 事件触发之后，由于 this.setState 导致了一次重新渲染。不过React会优化这个渲染过程。看上去有点类似双向数据绑定
问题
【this.state定义了一个数组，如何向数组增加数据呢】
制作数组的拷贝newlist，用array.push()的方法把数据加入到拷贝中newlist，最后用拷贝newlist来更新this.state中的数组。
class Main extends React.Component{
constructor(props){
super(props);
this.state={
inputvalue:'',
pro_list:[],
};
}
navCallBack=(sub_inputvalue)=>{
//实现向数组中添加数据
var newlist=this.state.pro_list;
newlist.push(sub_inputvalue);
this.setState({
inputvalue:sub_inputvalue,
pro_list:newlist
});
}
//.......
}
【如何实现清空input框的效果呢？】
【如何实现点击按钮删除一条数据呢？】
【JS箭头函数的this指向问题，指向哪里呢？如果是层层嵌套的函数，this指向是怎样的呢？】
【React中A组件如何调用B组件中的方法，达到修改B组件的状态的效果。】
描述：点击按钮(A组件)后刷新时间(B组件)
解决方案：新增一个父组件（Main），把状态提升到这个组件里面。
import React from 'react';
import ReactDOM from 'react-dom'; class Clock extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h2>name:{this.props.name}</h2>
<h2>It is {this.props.mydate}.</h2>
</div>
);
}
}
class ClickMe extends React.Component{
constructor(props) {
super(props);
}
handleClick=()=>{
//通过回调函数向父组件传递一个日期的参数，用于更新父组件的this.state.date
//更新成功后父组件会向Clock子组件传递数据
this.props.newTime(new Date());
}
render(){
return(
<div>
<button type="button" onClick={this.handleClick}>click me</button>
</div>
)
}
}
class Main extends React.Component{
constructor(props){
super(props);
this.state = {
myname:'username1',
date: new Date(),
};
}
getDate=(v)=>{
this.setState({
date:v,
})
}
render(){
return(
<div>
<Clock name={this.state.myname} mydate={this.state.date.toLocaleTimeString()}/>
<ClickMe newTime={this.getDate}/>
</div>
) }
}
ReactDOM.render(<Main/>, document.getElementById('root'));
【React中 再构造函数写 .bind(this)的意义在哪里？】
【JS实现固定侧边栏，也就是侧边栏单独滚动，和内容页互不影响】
位置：antd的布局 -> 最后一部分固定侧边栏 有相关的写法
<Sider style={{
overflow: 'auto', height: '100vh', position: 'fixed', left: 0,
}}
>
//......