react 起步一

1、表单

1、独立变量
const [userName, setUserName] = useState('');
const [email, setEmail] = useState('');
const [roleName, setRoleName] = useState('');

<Form>
<Form.Item label="姓名：" labelWidth="100">
<Input value={userName} onChange={(val) => setUserName(val)} ></Input>
</Form.Item>
<Form.Item label="电子邮件：" labelWidth="100">
	<Input value={email} onChange={(val) => setEmail(val)}></Input>
</Form.Item>
<Form.Item label="角色：" labelWidth="100">
	<Select value={roleNamee} placeholder="请选择角色" className="select-width"  onChange={(val) => setRoleName(val)} >
		<Select.Option label="系统管理员" value="系统管理员"></Select.Option>
		<Select.Option label="普通用户" value="普通用户"></Select.Option>
	</Select>
	</Form.Item>
</Form>

2、对象
const [userRowForm, setUserRowForm] = useState({
  displayName:"",email:"",roleName:""
});
const handleUpdate = (val, name) => {
		setUserRowForm({...userRowForm, [name]: val})
}

<Form model={userRowForm}>
<Form.Item label="姓名：" labelWidth="100">
<Input value={userRowForm.displayName} onChange={(val) => handleUpdate(val, 'displayName')}></Input>
</Form.Item>
<Form.Item label="电子邮件：" labelWidth="100">
	<Input value={userRowForm.email} onChange={(val) => setUserRowForm({...userRowForm, ['email']: val})}></Input>
</Form.Item>
<Form.Item label="角色：" labelWidth="100">
	<Select value={userRowForm.roleName} placeholder="请选择角色" className="select-width" onChange={(val) => handleUpdate(val, 'roleName')} >
      <Select.Option label="系统管理员" value="系统管理员"></Select.Option>
      <Select.Option label="普通用户" value="普通用户"></Select.Option>
		</Select>
	</Form.Item>
</Form>

2、自定义询问框实现

调用

const [showMsgBox, setShowMsgBox] = useState(false);
const handleMessageBoxClose = () => { setShowMsgBox(false); };
const handleMessageBoxSure = () => { setShowMsgBox(false); };
const handleRowDelete = () => { setShowMsgBox(true); };

<Button size="small" onClick={handleRowDelete}>删除</Button>

{
	showMsgBox && <MessageBoxComfirm 
	showClose={true} 
	msgTitle={'提示'} 
	msgContent={'此操作将永久删除该数据, 是否继续?'}
	closeEvent={handleMessageBoxClose}
	sureEvent={handleMessageBoxSure}
	/>
}

MessageBoxComfirm.jsx；

import React,{ useState } from 'react'
import { useEffect } from 'react';
import { Button } from 'element-react';
import './style/message-box-comfirm.less';
const MessageBoxComfirm = (props) => {
const [showClose, setShowClose] = useState(false);
const [title, setTitle] = useState('');
const _msg = props.msgContent;
const handleBoxClose = () => {props.closeEvent&&props.closeEvent(props);};
const handleBoxSure = () => { props.sureEvent && props.sureEvent(props);};
    useEffect(() => {
        setShowClose(props.showClose || false);
      	setTitle(props.msgTitle || '提示')
    }, []);
    function msgBox(){
        return (
            <div className="msg-model">
                <section className="msg-box-comfirm">
                    <header className="comfirm-header">
                        {title}
                        { showClose ? <i className="el-icon-close" onClick={handleBoxClose}></i> : null }
                    </header>
                    <section className="comfirm-content">
                        {_msg}
                    </section>
                    <footer className="comfirm-footer">
                        <Button size="small" onClick={handleBoxClose}>取消</Button>
                        <Button type="primary" size="small" onClick={handleBoxSure}>确定</Button>
                    </footer>
                </section>
            </div>
        )
    };
    
    useEffect(() => {
    },[])

    return (
        <>
            {msgBox()}
        </>
    )
}
export default MessageBoxComfirm;

.msg-model{
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: fixed;
    overflow: auto;
    margin: 0;
    width: 100%;
    height: 100vh;
    background-color: #00000061;
    z-index: 2023;
    display: flex;
    justify-content: center;
    align-items: center;
}
.msg-box-comfirm{
    width: 400px;
    background-color: #ffffff;
    border-radius: 4px;
}
.comfirm-header{
    width: 100%;
    height: 40px;
    padding: 5px 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ededed;
    box-sizing: border-box;
}
.comfirm-content{
    width: 100%;
    min-height: 100px;
    padding: 5px 10px;
    text-align: left;
    box-sizing: border-box;
}
.comfirm-footer{
    width: 100%;
    padding: 10px 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    box-sizing: border-box;
}
.el-icon-close{
    font-size: 12px;
    cursor: pointer;
}

3、Element-react Tree

1、使用menuTree.current.setCheckedKeys(authList) 赋值回显，操作多次情况下会出现不回显的情况。

2、解决办法：使用if+defaultCheckedKeys 控制渲染。

原：useEffect(() => {
    // 重复多次不回显或回显闪消
    authList && menuTree.current.setCheckedKeys(authList)
},[authList]);

改：{ show &&
    <Tree
        ref={menuTree}
        nodeKey="MenuId"
        data={menuList}
        options={menuOptions}
        isShowCheckbox={true}
        defaultCheckedKeys={authList}
        renderContent={(...args) => renderContent(...args)}
    />
}