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

Posted 2022-09-23 勇敢*牛牛

受控组件

将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
)

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

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

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()))
    
)

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;

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

输入框 ：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;

单个复选框：boolan值

<input
	type="checkbox"
	checked=isshow
	onChange=(e) => this.setState( isshow: e.target.checked )
/>

多选框就是：数组

---

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>