-
React将state与表单元素值value绑定在一起，有state的值来控制表单元素的值
-
受控组件：值受到react控制的表单元素
示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。
-
在state中添加一个状态，作为表单元素的value值
-
给表单元素绑定change事件，将表单元素的值设置为state的值
示例：
class App extends React.Component {
constructor(){
super()
this.inputChange = this.inputChange.bind(this)
}
state = {
txt : ‘’
}
inputChange(e){
this.setState({
txt: e.target.value
})
}
render(){
return (
{/* 把state的值设置给输入框的value，绑定change事件，这样用户在输入内容的时
候调用相应函数，在函数里面把当前设置的值赋值给state，从而达到数据的统一 */}
<input type=“text” value={this.state.txt} onChange=
{this.inputChange}/>
)
}
}
ReactDOM.render(,document.getElementById(‘root’))
-
问题：每个表单元素都有一个单独的事件处理函数，这样太繁琐
-
优化：使用一个事件处理程序同时处理多个表单元素
步骤
-
给表单元素添加name属性（用来区分是哪一个表单），名称与state相同（用来更新数据的）
-
根据表单内容来获取对应值
-
在change事件处理程序中通过 [name] 来修改对应的state
示例：
inputChange(e){
let target = e.target;
let value = target.type == ‘checkbox’ ? target.checked : target.value;
this.setState({
})
}
<input type=“text” value={this.state.txt} name=“txt” onChange=
{this.inputChange}/>
<input type=“checkbox” value={this.state.isChecked} name=“isChecked” onChange=
{this.inputChange}/>
-
说明：借助于ref，使用元素DOM方式获取表单元素值
-
ref的作用：获取DOM或者组件
使用步骤
-
调用 React.createRef() 方法创建ref对象
-
将创建好的 ref 对象添加到文本框中
-
通过ref对象获取到文本框的值
class App extends React.Component {
constructor(){
super()
//创建 ref
this.txtRef = React.createRef()
}
// 获取文本框的值
getTxt =() => {
console.log(this.txtRef.current.value)
}
render(){
return (
获取值
)
}
}
===========================================================================
-
渲染评论列表（列表渲染）
-
没有评论数据时渲染：暂无评论（条件渲染）
-
获取评论信息，包括评论人和评论内容（受控组件）
发表评论，更新评论列表（ setState() ）
- html
<!doctype html>
-
xxxxx
删除
-
yyyy
删除
已完成0 / 全部2
清除已完成任务
- css
/base/
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
