视频测试

下载测试文件

-点击下面的链接下载测试文件-

下载

SSH

下载

FTP

下载

VSCod

下载

VM虚拟机最新

下载

腾讯源npm config set registry https://mirrors.huaweicloud.com/repository/npm/

npm install -g create-react-app

create-react-app 项目名称

cd 项目文件夹

npm run start

npm install -g serve -s

serve -s build

作业

删除注释

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>ANY</title>
    <script src="https://unpkg.com/react@18.2.0/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.18.0/babel.min.js"></script>
    
    <link rel="icon" type="image/x-icon" href="https://ipv4.website/a1.jpg" />
</head>
<body>
    <div id="root"></div>
<script type="text/babel">
    const divReact =document.getElementById('root');
    const infoMap = {
        input2focusAlertInfo: '获取焦点',
        titleInfo: 'any'
    }
    // class FormComp8 extends React.Component {
    //     constructor(props) {
    //         super(props);
    //         this.state = 
    //             isOnOff: true,
    //             username: 'any'
    //         };
    //         this.handleInputChange = this.handleInputChange.bind(this);
    //     }
    //     handleInputChange(event) {
    //     const target = event.target;
    //     const value = target.type === 'checkbox' ? target.checked : target.value;
    //     const name = target.name;
    //     this.setState({
    //         [name]: value
    //     });
    //     console.log(name + " : " + value);
    // }
    // render(){
    //     return(
    //         <form>
    //             <label>
    //                 On/Off:  
    //                 <input name="onoff"type="checkbox" checked={this.state.onoff} onChange={this.handleInputChange}/>      
    //             </label><br/>
    //             <label>
    //                 <input name="username" type="text" value={this.state.username} onChange={this.handleInputChange}/>
    //             </label>
    //         </form>
    //     );
    // }
    // }
    class InputFocusComp extends React.Component {
        constructor(props) {
            super(props);
            this.inputTextFocus=this.inputTextFocus.bind(this);
        }
        inputTextFocus(aaa) {
            if(aaa){
                alert(infoMap.input2focusAlertInfo);
                aaa=!aaa;
        }
        alert(infoMap.input2focusAlertInfo);
    }
    render(){
        return(
            <input type="text" onFocus={this.inputTextFocus} onChange={this.inputTextFocus}/>
        );
    }
}
    const any=(
        <span>
            <h2 align="center">{infoMap.titleInfo}</h2>
            <InputFocusComp inputVal={"true"}/>
            <InputFocusComp aaa={true}/>
        </span>
    );
    // ReactDOM.createRoot(divReact).render(<FormComp8/>);
    ReactDOM.createRoot(divReact).render(any);
</script>
</body>
</html>