• 问题集 & 知识点


    芝士

    【事件绑定的三种方法】

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

    【如何实现清空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'));
    View Code

    【React中 再构造函数写 .bind(this)的意义在哪里?】

    【JS实现固定侧边栏,也就是侧边栏单独滚动,和内容页互不影响】

    位置:antd的布局 -> 最后一部分固定侧边栏 有相关的写法

        <Sider style={{
          overflow: 'auto', height: '100vh', position: 'fixed', left: 0,
        }}
        >
        //......
    View Code

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

  • 相关阅读:
    URI 和 URL
    TCP/IP协议
    TCP/IP 通信传输流
    Python 之 函数可变参数和关键字参数
    Python 之装饰器decorator
    Python 之进程
    Android
    Redis持久化(persistence)
    python正则表达式
    selenium+python定位iframe元素
  • 原文地址:https://www.cnblogs.com/remly/p/10280037.html
Copyright © 2020-2023  润新知