问题集 & 知识点

芝士

【事件绑定的三种方法】

在以类继承的方式定义的组件中，为了能方便地调用当前组件的其他成员方法或属性（如：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,
    }}
    >
    //......

【JS如何实现侧边栏可以拖拉改变大小？】