React如何动态绑定input框的值
最近公司的项⽬选择了react作为前端开发技术框架，作为⼀名vue的忠实粉丝也不得不硬着头⽪上了，毕竟要吃饭。只能⼀边学习⼀边开发了，今天踩的坑是 input输⼊框动态绑定数据后不能输⼊。查阅了⼀番终于了解了，先上代码
import React, {Component, Fragment} from "react";  // ⾸先还是引⼊需要使⽤的组件
class Fire extends Component {
constructor(props) {
super(props);
this.state = {
input_value:'',
}
}
rander(){
return(
<Fragment>
<div>
<input  type='text' value={this.state.input_value}
className='input' />
<button className='add'>新增<button>
</div>
<Fragment>
)
}
}
//这便是我动态绑定的数据，然⽽input框依然不能输⼊任何数据
⼏经折腾发现React的数据绑定不是这个简单的，还需要添加监听时间才⾏，于是便继续写
<input type="text" value={this.state.input_value} onChange={this.input_change.bind(this)} className='input'/>
// 这⾥使⽤了onChange事件去监听this.input_change，并且通过 .bind(this)将constructor传⼊到我们的⽅法中input框禁止输入
接下来在render后⾯继续写我们的监听⽅法去绑定数据
input_change(e){
this.setState({
input_value:e.target.value
})
}
到这⾥我们就可以随⼼所欲的在input框中输⼊代码了
完整代码如下
import React, {Component, Fragment} from "react";
class Fire extends Component {
constructor(props){
super(props);
this.state={
input_value:'',
list:[],
}
}
render() {
return (
<Fragment>
<div>
<input type="text" value={this.state.input_value} onChange={this.input_change.bind(this)} className='input'/>
<button className='add'>新增</button>
</div>
<ol className='list'>
<li>这是⼀个待完成事项</li>
<li>这是⼀个待完成事项</li>
</ol>
</Fragment>
)
};
input_change(e){
this.setState({
input_value:e.target.value
})
}
}
export default Fire

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。