1.响应式数据绑定
React
不建议你直接操作DOM
元素,而是要通过数据进行驱动,改变界面中的效果。React会根据数据的变化,自动的帮助你完成界面的改变。所以在写React代码时,你无需关注DOM相关的操作,只需要关注数据的操作就够了。
现在的需求是增加小姐姐的服务项,就需要先定义数据。数据定义在SmailSmailGirl组件中的构造函数里constructor
。
//js的构造函数,由于其他任何函数执行
constructor(props){
super(props) //调用父类的构造函数,固定写法
this.state={
inputVal:'' , // input中的值
list:[] //服务列表
}
}
在React
中的数据绑定和Vue
中几乎一样,也是采用字面量
(我自己起的名字)的形式,就是使用{}
来标注,其实这也算是js代码的一种声明。比如现在我们要把inputVal
值绑定到input
框中,只要写入下面的代码就可以了。
<input value={this.state.inputVal} />
2.绑定事件
这时候我们在文本框中输入值,并没有什么变化,这是因为我们绑定了inputVal的值。如果要想改变,需要绑定响应事件,改变inputVal的值。
<input value={this.state.inputVal} onChange={this.inputChange}/>
然后我们在render方法下面,新建一个inputChange方法,如下:
inputChange(e){
console.log(e);
console.log(e.target.value) //获取响应值
//this.state.inputValue=e.target.value; 这种写法是错误的
}
最后一个赋值方式是错误的,程序会直接报错,如以下两个错:
1.一个是this的指向不对,你需要重新用bind设置一个指向。
2.另一个是React中改变值需要使用this.setState方法
第一个错误好解决,直接使用bind进行绑定。
<input value={this.state.inputVal} onChange={this.inputChange.bind(this)}/>
第二个我们直接使用this.setState方法进行赋值。
inputChange(e){
this.setState({
inputVal:e.target.value
})
}
本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!