采集自动组合(本文是学习React笔记，对应视频为的10-13节 )
优采云 发布时间: 2021-10-14 07:04采集自动组合(本文是学习React笔记，对应视频为的10-13节
)
本文为学习React笔记，对应视频为：10-13节。
一、组件组合使用
问题：数据存储在哪个组件中？
查看数据时是否需要某个组件，或者是否需要某个组件？
问题二：在子组件中改变父组件的状态
子组件不能直接改变父组件的状态
状态在哪个组件中，更新状态的行为应该在哪个组件中定义
父组件定义函数并传递给子组件
基于组件的写函数的过程：
1. 拆分组件
2. 实现静态组件（只有静态接口，没有动态数据和交互）
3. 实现动态组件
1）实现初始化数据的动态显示
2）实现交互功能
SimpleList
class App extends React.Component {
constructor(props) {
super(props);
//初始化状态
this.state = {
todos: ['吃饭', '睡觉', '打代码']
}
this.addTodo = this.addTodo.bind(this)
}
addTodo(todo) {
const {todos} = this.state
todos.unshift(todo)
//更新状态
this.setState({
todos: todos
})
}
render() {
const {todos} = this.state
return (
Simple TODO List
)
}
}
class Add extends React.Component {
constructor(props) {
super(props);
this.add = this.add.bind(this)
}
add() {
//1. 读取输入的数据
const todo = this.todoInput.value.trim()
//2. 检查合法
if (!todo) {
return
}
//3. 添加
this.props.addTodo(todo)
//4. 清除
this.todoInput.value = ''
}
render() {
return (
this.todoInput = input}/>
add #{this.props.count + 1}
)
}
}
Add.propTypes = {
count: PropTypes.number.isRequired,
addTodo: PropTypes.func.isRequired
}
class List extends React.Component {
render() {
const {todos} = this.props
return (
{
todos.map((todo, index) => {todo})
}
)
}
}
List.propTypes = {
todos: PropTypes.array.isRequired
}
ReactDOM.render(, document.getElementById('simple'))
二、采集表单数据
要求：自定义收录表单的组件
1. 界面收录用户名和密码
2. 输入用户名和密码后，点击登录提示
3. 不提交表单
收录表单的组件的分类：
受控组件：表单输入数据可以自动采集状态
不受控制的组件：需要手动读取表单输入框中的数据
Form
class LoginForm extends React.Component {
constructor(props) {
super(props);
//初始化状态
this.state = {
pwd: ''
}
this.handleSubmit = this.handleSubmit.bind(this)
this.handleOnChange = this.handleOnChange.bind(this)
}
handleSubmit(event) {
const name = this.nameInput.value
//用 {} 后相当于 const pwd = this.state.pwd
const {pwd} = this.state
alert(`准备提交的账号是：${name}，密码是${pwd}`)
//阻止事件的默认行为（提交表单）
event.preventDefault()
}
handleOnChange(event) {
//读取输入的值
const pwd = event.target.value;
//更新pwd状态(pwd恰好一致可以省略 pwd:)
this.setState({pwd})
}
render() {
return (
用户名： this.nameInput = input}/>
密码：
)
}
}
ReactDOM.render(, document.getElementById('form'))
