受控组件——受控组件简写——受控表单组件-——复选框取消全选等

受控组件

将state与表单项中的value值绑定在一起，有state的值来控制表单元素的值，称为受控组件。
绑定步骤：
💖在state中添加一个状态，作为表单元素的value值
💖给表单元素绑定change事件，将表单元素的值设置为state的值

<input type="text" value={this.state.username} onChange={this.inputChange.bind(this)} />

注：多表单元素需优化事件方法
this.setState({
    [e.target.name]: e.target.value
})
1
2
3
4
5
6

没有和state数据源进行关联的表单项，而是借助ref，使用元素DOM方式获取表单元素值
使用步骤
💖调用 React.createRef() 方法创建ref对象
💖将创建好的 ref 对象添加到文本框中
💖通过ref对象获取到文本框的值

1

受控组件简写——登录组件

loginForm.js

export default (_this)=>({
    username:{
        value:"admin",
        onChange:e=>_this.setState(state=>({username:{...state.username,value:e.target.value.trim()}}))
    },
    password:{
        value:"admin123",
        onChange:e=>_this.setState(state=>({password:{...state.password,value:e.target.value.trim()}}))
    }
})
1
2
3
4
5
6
7
8
9
10

app.jsx

import React, { Component } from 'react';
import loginForm from 'userfrom/loginForm';
class App extends Component {
    state={
       ...loginForm(this)
    }
    setValue = (name)=>(evt)=>{
        this.setState({
            [name]:evt.target.value.trim()
        })
    }
    login = () => {
        console.log(this.state);
    }
    render() {
        let {username,password} = this.state;
        return (
            <div>
                <input type="text" {...username}/>
                <hr />
                <input type="text" {...password}/>
                <hr />
                <button onClick={this.login}>点击登录</button>
            </div>
        );
    }
}

export default App;


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

受控表单组件_单选_单个复选_多选框

输入框 ：value和onchange的绑定
单选、单个复选框。多个复选框

单选：一个元素，默认值

import React, { Component } from 'react';

class App extends Component {
    state={
        username:'',
        sex:'女'
    }
    render() {
        let {username,sex} = this.state;
        return (
            <div>
                <div>
                    <input type="text" value={username} onChange={e=>{this.setState({username:e.target.value})}}/>
                </div>
                <hr />
                <div>
                    <input type="radio" checked={sex === '男'} value="男" name="sex" onChange={e=>{this.setState({sex:e.target.value})}}/>男
                    <input type="radio" checked={sex === '女'} value="女" name="sex" onChange={e=>{this.setState({sex:e.target.value})}}/>女
                </div>

            </div>
        );
    }
}

export default App;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

单个复选框：boolan值

<input
	type="checkbox"
	checked={isshow}
	onChange={(e) => this.setState({ isshow: e.target.checked })}
/>
1
2
3
4
5

多选框就是：数组

---

setLessonsFn = (e) => {
    if (e.target.checked) {
        this.setState((state) => ({
            lessons: [...state.lessons, e.target.value],
        }));
    } else {
        this.setState((state) => ({
            lessons: state.lessons.filter((item) => item != e.target.value),
        }));
    }
};
+++++++++++++++
<div>
<input
	type="checkbox"
	value="html"
	checked={lessons.includes("html")}
	onChange={this.setLessonsFn}
/>
html
<input
	type="checkbox"
	value="css"
	checked={lessons.includes("css")}
	onChange={this.setLessonsFn}
/>
<input
	type="checkbox"
	value="js"
	checked={lessons.includes("js")}
	onChange={this.setLessonsFn}
/>
js
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34