标签：fragment 如何 his 组件 port bsp 绑定 事件 efault
最近公司的项目选择了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传入到我们的方法中
接下来在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
标签：fragment 如何 his 组件 port bsp 绑定 事件 efault
原文地址：https://www.cnblogs.com/yang656/p/11110588.html
