React响应式设计及原理

最新推荐文章于 2024-08-13 08:39:52 发布

前端白了又白兔

最新推荐文章于 2024-08-13 08:39:52 发布

阅读量5.7k

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/weixin_42589562/article/details/87730269

版权

React 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、实例演示

对input输入框实现双向数据绑定，当输入数据时，同时改变和显示input中的数据

class TodoList extends Component {
//1.初始化时定义数据
constructor(props) {
super(props);
this.state = {
inputValue: '',
list: []
}
}
render() {
return (
<Fragment>
<input
value={this.state.inputValue} /* 绑定当前组件中的数据*/
onChange={this.handleInputChange.bind(this)}
/* 当输入框内容改变时，触发函数改变组件中的数据*/
/>
</Fragment>
)
}
handleInputChange(e) {
/* 通过setState方法才可以改变组件中的数据*/
this.setState({
inputValue: e.target.value
})
}
}