问题集 & 知识点

【事件绑定的三种方法】

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