React之数据绑定以及表单处理

news2024/11/16 21:46:17

一、表单元素

        像<input>、<textarea>、<option>这样的表单元素不同于其他元素，因为他们可以通过用户交互发生变化。这些元素提供的界面使响应用户交互的表单数据处理更加容易

        交互属性，用户对一下元素交互时通过onChange回调函数来监听组件变化。表单元素支持几个受用户交互影响的属性：

        value用于<input>、<textarea>

        checked用于<checkbox>、<radio>

        selected用于<option>

二、受限组件和不受限组件

1.受限组件与双向数据绑定

受限组件：设置了value的<input>是一个受限组件，对于受限的<input>，渲染出来HTML元素始终保持value属性的值，此时用户在渲染出来的组件里输入任何值都不起作用

 写一个完整的表单元素的实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>受限组件和双向绑定</title>
    <script src="../js/react.development.js "></script>
    <script src="../js/react-dom.development.js"></script>
    <!-- 用于解析babel -->
    <script src="../js/babel.min.js"></script>
</head>

<body>
    <div id="hello">
    </div>
    <div id="hello2">
    </div>
    <script type="text/babel">
        //受限组件,他的
        class Hello extends React.Component{
            
            render(){
                return <div>
                    <input type="text" value='123'/>
                    <hr/>
                </div>
               
            }
        }
        ReactDOM.render(<Hello />,document.getElementById('hello'))
        //双向数据绑定
        class Hello2 extends React.Component{
            state = {
                value:'12345'
            }
            //
            valueChange = (e)=>{
                this.setState({value:e.target.value})
            }
            render(){
                return <div>
                    <input type="text" value={this.state.value} onChange={this.valueChange}/>
                    <p>{this.state.value}</p>
                </div>
            }
        }
        ReactDOM.render(<Hello2 />,document.getElementById('hello2'))
    </script>
    <!-- radio、checkbox、textarea、select -->
    <hr/>
    <div id="root1"></div>
    <script type="text/babel">
        //表单元素的双向绑定
        class Rtx extends React.Component{
            state = {
                //单选按钮
                radioValue:'',
                //check选中的
                checkArr:[],
                //文本域的value
                textareaValue:'',
                selectArr: ['北京','上海','湖北','广东'],
                //select选中的地址
                address:''
            }
            //
            radioChange = (e)=>{
                this.setState({radioValue:e.target.value})
            }
            checkboxChange =(e)=>{
                //由于组件继承的是purecomponent,因此要将数组复制一次
                let _checkArr = [...this.state.checkArr]
                if (e.target.checked) {
                    //将所有选中的复选框的value值，push到一个数组（checkArr）中
                    _checkArr.push(e.target.value)
                } else {
                    //若取消选中，则将其从checkArr中减掉
                    _checkArr.splice(this.state.checkArr.indexOf(e.target.value), 1)
                }
                //利用setState更新checkArr
                this.setState({
                    checkArr:_checkArr
                })
            }
            textareaChange=(e)=>{
                this.setState({textareaValue:e.target.value})
            }
            selectChange=(e)=>{
                this.setState({address:e.target.value})
            }
            submit =()=>{
                console.log(this.state);
            }
            render(){
                let checkInfo=["c1",'c2']
                let {radioValue,checkArr,textareaValue,selectArr,address } =this.state
                let {checkboxChange} =this
                return <div>
                   <div>
                    性别：
                     男<input type="radio" value='man' checked={radioValue=='man'?true:false}  onChange={this.radioChange}/>
                     女<input type="radio" value='woman' checked={radioValue=='woman'?true:false} onChange={this.radioChange}/>
                    </div>
                    <div>
                        {
                            checkInfo.map(function(item,index){
                                return <span>
                                    {item}
                                    <input type="checkbox" name='box' value={item} key={index} 
                                    onChange={checkboxChange} 
                                    checked={checkArr.indexOf(item)!==-1}></input>
                                    </span> 
                            })
                        }
                    </div>
                    <div>
                        <textarea name="" id="" value={textareaValue} cols="30" rows="10" onChange={this.textareaChange}></textarea>
                    </div>
                    <div>
                        地址:
                        <select value={address} name="address" onChange={this.selectChange}>
                        {
                            selectArr.map(function(item,index){
                            return <option key={index}>{item}</option>
                            })
                        }
                        </select>   
                    </div>
                    <button disabled={!radioValue || !address || !checkArr ||  !textareaValue } onClick={()=>this.submit()}>提交</button>
                </div>
            }
        }
        ReactDOM.render(<Rtx />,document.getElementById('root1'))
    </script>
    <!-- radio、
</body>

</html>

2.不受限组件

不受限组件： 没有设置value（或者设为null）的input组件是一个不受限组件。杜宇不受限的input组件，渲染出来的元素直接反映用户输入

 使用defaultValue属性不使用value可以实现不受限组件的双向数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>非受限组件</title>
    <script src="../js/react.development.js "></script>
    <script src="../js/react-dom.development.js"></script>
    <!-- 用于解析babel -->
    <script src="../js/babel.min.js"></script>
</head>

<body>
    <div id="root1"></div>
    <script type="text/babel">
        //非受限组件
        class Rtx extends React.Component {
            state = {
                value: '123'
            }
            valueChange = (e) => {
                this.setState({ value: e.target.value })
                console.log(this.state.value);
            }
            render() {

                return <div>
                    <div>
                        <input type="text" />
                        <input type="text" defaultValue={this.state.value} onChange={this.valueChange} />
                        <p>{this.state.value}</p>
                    </div>
                    <div>
                        性别：
                        男<input type="radio" name='sex' value='man' />
                        女<input type="radio" name='sex' value='woman' />
                    </div>
                </div>
            }
        }
        ReactDOM.render(<Rtx />, document.getElementById('root1'))
    </script>
    <!-- radio、checkbox、textarea、select -->
    <div id="root1"></div>
    <script type="text/babel">
        //表单元素的双向绑定
        class Rtx extends React.Component {
            state = {
                //单选按钮
                radioValue: '',
                //check选中的
                checkArr: [],
                //文本域的value
                textareaValue: '',
                selectArr: ['北京', '上海', '湖北', '广东'],
                //select选中的地址
                address: ''
            }
            //
            radioChange = (e) => {
                this.setState({ radioValue: e.target.value })
            }
            checkboxChange = (e) => {
                //由于组件继承的是purecomponent,因此要将数组复制一次
                let _checkArr = [...this.state.checkArr]
                if (e.target.checked) {
                    //将所有选中的复选框的value值，push到一个数组（checkArr）中
                    _checkArr.push(e.target.value)
                } else {
                    //若取消选中，则将其从checkArr中减掉
                    _checkArr.splice(this.state.checkArr.indexOf(e.target.value), 1)
                }
                //利用setState更新checkArr
                this.setState({
                    checkArr: _checkArr
                })
            }
            textareaChange = (e) => {
                this.setState({ textareaValue: e.target.value })
            }
            selectChange = (e) => {
                this.setState({ address: e.target.value })
            }
            submit = () => {
                console.log(this.state);
            }
            render() {
                let checkInfo = ["c1", 'c2']
                let { radioValue, checkArr, textareaValue, selectArr, address } = this.state
                let { checkboxChange } = this
                return <div>
                    <div>
                        性别：
                        男<input type="radio" defaultValue='man'  checked={radioValue == 'man' ? true : false} onChange={this.radioChange} />
                        女<input type="radio" defaultValue='woman' checked={radioValue == 'woman' ? true : false} onChange={this.radioChange} />
                    </div>
                    <div>
                        {
                            checkInfo.map(function (item, index) {
                                return <span>
                                    {item}
                                    <input type="checkbox" name='box' defaultValue={item} key={index}
                                        onChange={checkboxChange}
                                        checked={checkArr.indexOf(item) !== -1}></input>
                                </span>
                            })
                        }
                    </div>
                    <div>
                        <textarea name="" id="" value={textareaValue} cols="30" rows="10" onChange={this.textareaChange}></textarea>
                    </div>
                    <div>
                        地址:
                        <select defaultValue={address} name="address" onChange={this.selectChange}>
                            {
                                selectArr.map(function (item, index) {
                                    return <option key={index}>{item}</option>
                                })
                            }
                        </select>
                    </div>
                    <button disabled={!radioValue || !address || !checkArr || !textareaValue} onClick={() => this.submit()}>提交</button>
                </div>
            }
        }
        ReactDOM.render(<Rtx />, document.getElementById('root1'))
    </script>
</body>

</html>

三、常用表单数据绑定

对相同逻辑的表单change事件进行封装

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单提交</title>
    <script src="../js/react.development.js "></script>
    <script src="../js/react-dom.development.js"></script>
    <!-- 用于解析babel -->
    <script src="../js/babel.min.js"></script>
</head>

<body>
    <div id="root1"></div>
    <script type="text/babel">
        //非受限组件
        class Rtx extends React.Component {
            state = {
                name: 'fxt',
                sex:'1',
                address:'上海',
                textareaValue:'hello world'
            }
            //我们发现下面获得改变值的方法都是一样的，所以对一样的逻辑函数进行封装
            handleChange=(e)=>{
                console.log(e.target.name);
                let key = e.target.name
                this.setState({[key]:e.target.value})
                // this.setState({[e.target.name]:e.target.value})
            }
            // getName=(e)=>{
            //     this.setState({name:e.target.value})
            // }
            // getSex=(e)=>{
            //     this.setState({sex:e.target.value})
            // }
            getAddress=(e)=>{
                this.setState({address:e.target.value})
            }
            getTextareaValue=(e)=>{
                this.setState({textareaValue:e.target.value})
            }
            submit = (e) => {
                // e.preventDefault();
                alert(JSON.stringify(this.state))
            }
            render() {
                let  selectArr=['北京', '上海', '湖北', '广东']
                let {name,sex,address,textareaValue}=this.state
                return <div>
                    <form action="">
                        <label for="">姓名：<input type="text" name='name' defaultValue={name} onChange={this.handleChange}/></label>  
                        <label for="">
                            <div>
                                性别：
                                <input type="radio" name="sex" value='1' defaultChecked={sex==1? true:false} id="" onChange={this.handleChange}/>男
                                <input type="radio" name="sex" value='2' defaultChecked={sex==2? true:false} id="" onChange={this.handleChange}/>女
                            </div>
                        </label>  
                        <label for="">
                            <div>
                                地址:
                                <select defaultValue={address} name="address" onChange={this.getAddress}>
                                    {
                                        selectArr.map( (item, index) =>{
                                            return <option key={index}>{item}</option>
                                        })
                                    }
                                </select>
                            </div>
                        </label>
                        <label for="">
                            <div>
                                备注：
                                <textarea name="" id="" defaultValue={textareaValue} cols="30" rows="10" onChange={this.getTextareaValue}></textarea>   
                            </div>
                        </label>
                        <button disabled={!name || !address || !textareaValue || !sex} onClick={()=>{this.submit()} }>提交</button>
                    </form>
                </div>
            }
        }
        ReactDOM.render(<Rtx />, document.getElementById('root1'))
    </script>
</body>

</html>

四、注册功能实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册表单验证</title>
    <script src="../js/react.development.js "></script>
    <script src="../js/react-dom.development.js"></script>
    <!-- 用于解析babel -->
    <script src="../js/babel.min.js"></script>
    <style>
        .error{
            color: red;
        }
    </style>
</head>

<body>
    <div id="root1"></div>
    <script type="text/babel">
        //非受限组件
        class Rtx extends React.Component {
            state = {
                name: '',
                nameError:"",
                passworld:'',
                passworldError:'',
                sex:'1',
                phone:'',
                phoneError:'',
                city:'北京',
                textareaValue:'hello world'
            }
            //单独写校验规则的
            nameChange=(e)=>{
                let rule= /^[\w-]{4,10}$/ 
                let value=e.target.value
                let error=''
                if(!value){
                    error='请输入昵称'
                }else if(!rule.test(value)){
                    error='请输入4-10位的昵称'
                }else{
                    error=''
                }
                this.setState({
                    name:value,
                    nameError:error
                })
            }
            //进行校验的表单元素统一封装
            handleTest=(e)=>{
                let ruleArr={
                    passworld:{
                        rule:new RegExp(/^\S*(?=\S{6,12})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/),
                        text:'密码',
                        error:'6-12位，至少包括一个大小写字母、数字、特殊字符'
                    },
                    phone:{
                        rule:new RegExp(/^(?:(?:\+|00)86)?1[3-9]\d{9}$/),
                        text:'手机号',
                        error:'请输入正确的手机号'
                    }
                }
                let value=e.target.value
                let key = e.target.name
                let ruleInfo={}
                let error=''
                Object.keys(ruleArr).map((el)=>{
                    if(el==key){
                        ruleInfo=ruleArr[key]
                    }
                })
                if(!value){
                    error='请输入'+ruleInfo.text
                }else if(!ruleInfo.rule.test(value)){
                    error=ruleInfo.error
                }else{
                    error=''
                }
                this.setState({
                    [key]:value,
                    [key+'Error']:error
                })
            }
            //不进行校验的表单通过自定义属性实现获得要设置的值的key键
            handleChange=(e)=>{
                console.log(e.target.name);
                let key = e.target.name
                this.setState({[key]:e.target.value})
                // this.setState({[e.target.name]:e.target.value})
            }
            //提交想提交值
            submit = (e) => {
                e.preventDefault()//阻止默事件
                let {name,passworld,sex,phone,city,textareaValue} =this.state
                let data={
                    name,passworld,sex,phone,city,textareaValue
                }
                alert(JSON.stringify(data))
            }
            render() {
                let  selectArr=[{id:1,text:'北京'},{id:2,text: '上海'}, {id:3,text:'湖北'}]
                let {name,nameError,passworld,passworldError,sex,phone,phoneError,city,textareaValue}=this.state
                return <div>
                    <form action="">
                        <label for="">
                            昵称：<input type="text" name='name' defaultValue={name} onChange={this.nameChange}/>
                            <span className='error'> * {nameError}</span>
                        </label>  
                        <label for="">
                            <div>
                                密码：
                                <input type="text" name='passworld' defaultValue={passworld} onChange={this.handleTest}/>
                                <span className='error'> * {passworldError}</span>
                            </div>
                        </label>  
                        <label for="">
                            <div>
                                性别：
                                <input type="radio" name="sex" value='1' defaultChecked={sex==1? true:false} id="" onChange={this.handleChange}/>男
                                <input type="radio" name="sex" value='2' defaultChecked={sex==2? true:false} id="" onChange={this.handleChange}/>女
                            </div>
                        </label> 
                        <label for="">
                            手机号：<input type="text" name='phone' defaultValue={phone} onChange={this.handleTest}/>
                            <span className='error'> * {phoneError}</span>    
                        </label>  
                        <label for="">
                            <div>
                                城市:
                                <select defaultValue={city} name="city" onChange={this.handleChange}>
                                    {
                                        selectArr.map( (item, index) =>{
                                            return <option value={item.id} key={index}>{item.text}</option>
                                        })
                                    }
                                </select>
                            </div>
                        </label>
                        <label for="">
                            <div>
                                备注：
                                <textarea name="textareaValue" id="" defaultValue={textareaValue}  cols="30" rows="10" onChange={this.handleChange}></textarea>   
                            </div>
                        </label>
                        <button disabled={!name || nameError|| !passworld || passworldError|| !sex || !phone ||phoneError || !city ||!textareaValue } onClick={this.submit }>提交</button>
                    </form>
                </div>
            }
        }
        ReactDOM.render(<Rtx />, document.getElementById('root1'))
    </script>
</body>

</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1480711.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

SpringBoot底层原理

SpringBoot底层原理

SpringBoot底层原理 一 配置优先级 1.配置方式 Springboot中支持三种配置方式&#xff0c;分别为&#xff1a; application.propertiesapplication.ymlapplication.yaml 2.配置优先级 当存在多份配置文件时&#xff0c;配置文件会按照它们的优先级生效。 优先级从高到底…
阅读更多...
一文带你了解MySQL之B+树索引的原理

一文带你了解MySQL之B+树索引的原理

前言 学完前面我们讲解了InnoDB数据页的7个组成部分&#xff0c;知道了各个数据页可以组成一个双向链表&#xff0c;而每个数据页中的记录会按照主键值从小到大的顺序组成一个单向链表&#xff0c;每个数据页都会为存储在它里边儿的记录生成一个页目录&#xff0c;在通过主键查…
阅读更多...
docker mysql主从复制

docker mysql主从复制

新建主服务器容器实例3301 mysql 主 3301 docker run -p 3301:3306 --name mysql-master \ -v /mydata/mysql-master/log:/var/log/mysql \ -v /mydata/mysql-master/data:/var/lib/mysql \ -v /mydata/mysql-master/conf:/etc/mysql \ -v /home/mysql/mysql-files:/var/lib/…
阅读更多...
什么是前端框架中的数据绑定（data binding）？有哪些类型的数据绑定？

什么是前端框架中的数据绑定（data binding）？有哪些类型的数据绑定？

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…
阅读更多...
鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：边框设置）

鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：边框设置）

设置组件边框样式。 说明&#xff1a; 从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 border border(value: BorderOptions) 设置边框样式。 卡片能力&#xff1a; 从API version 9开始&#xff0c;该接口支持在ArkTS卡…
阅读更多...
怎样选择一家可靠的代理IP服务？

怎样选择一家可靠的代理IP服务？

在数字化时代&#xff0c;随着网络安全和数据隐私的日益重要&#xff0c;代理IP服务已经成为个人用户和企业保护网络身份、实现数据加密和访问地理限制内容的重要工具。然而&#xff0c;面对市场上众多的代理IP服务提供商&#xff0c;如何选择一家可靠的代理IP服务提供商也成为…
阅读更多...
【JavaScript 漫游】【026】进度事件简记

【JavaScript 漫游】【026】进度事件简记

文章简介 本篇文章为【JavaScript 漫游】专栏第 025 篇文章&#xff0c;简单记录了进度事件的知识点。 进度事件的种类 进度事件用来描述资源加载的进度&#xff0c;主要由 AJAX 请求、<img>、<audio>、<video>、<style>、<link> 等外部资源的…
阅读更多...
如何知道当前ubuntu的版本

如何知道当前ubuntu的版本

查看版本&#xff1a; cat /etc/lsb-release 查看内核&#xff1a; uname -a
阅读更多...
[AutoSar]BSW_Com07 CAN报文接收流程的函数调用

[AutoSar]BSW_Com07 CAN报文接收流程的函数调用

目录 关键词平台说明一、背景二、顺序总览三、函数说明3.1 Com_RxIndication&#xff08;&#xff09; 关键词 嵌入式、C语言、autosar、OS、BSW 平台说明 项目ValueOSautosar OSautosar厂商vector &#xff0c;芯片厂商TI 英飞凌编程语言C&#xff0c;C编译器HighTec (GCC)…
阅读更多...
鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：布局约束）

鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：布局约束）

通过组件的宽高比和显示优先级约束组件显示效果。 说明&#xff1a; 从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 aspectRatio aspectRatio(value: number) 指定当前组件的宽高比。 卡片能力&#xff1a; 从API vers…
阅读更多...
本地navicate连接vm虚拟机中的mysql5.7docker容器

本地navicate连接vm虚拟机中的mysql5.7docker容器

一&#xff0c;配置 前提是我已经启动的mysql5.7容器 使用 docker ps -a 查看所有的容器 使用 docker exec -it c4f9 bash 进入mysql命令行&#xff0c;注意这个c4f9是容器唯一id&#xff0c;不用写全连接mysql mysql -uroot -p123456&#xff0c;连接成功后 输入 show datab…
阅读更多...
JOSEF约瑟 FHP-33Q/4跳位、合位、电源监视综合控制继电器 凸出式板前接线 0.1-10S

JOSEF约瑟 FHP-33Q/4跳位、合位、电源监视综合控制继电器 凸出式板前接线 0.1-10S

FHP-33系列跳位、合位、电源监视综合控制继电器系列型号&#xff1a;FHP-33A/1跳位、合位、电源监视综合控制继电器&#xff1b;FHP-33A/2跳位、合位、电源监视综合控制继电器&#xff1b;FHP-33A/3跳位、合位、电源监视综合控制继电器&#xff1b;FHP-33A/4跳位、合位、电源监…
阅读更多...
3/1作业

3/1作业

1.用fwrite和fread将任意bmp图片&#xff0c;修改成德国的国旗 #include <stdio.h> #include <string.h> #include <unistd.h> #include <stdlib.h> int main(int argc, const char *argv[]) { FILE* fp fopen("1.bmp","r")…
阅读更多...
传输线与反射（六）

传输线与反射（六）

只要信号遇到瞬时阻抗突变&#xff0c;就会发生反射。反射信号的量值由瞬时阻抗的变化量决定&#xff0c;将反射电压与入射电压的比值称为反射系数&#xff0c;可以用如下公式计算&#xff1a; 反射是造成单一线网络中所有信号质量的问题根源。为减小影响&#xff0c;需要做到以…
阅读更多...
海豚调度DolphinScheduler入门学习

海豚调度DolphinScheduler入门学习

DS简介&#xff1a; DolphinScheduler 是一款分布式的、易扩展的、高可用的数据处理平台&#xff0c;主要包含调度中心、元数据管理、任务编排、任务调度、任务执行和告警等模块。其技术架构基于 Spring Boot 和 Spring Cloud 技术栈&#xff0c;采用了分布式锁、分布式任务队列…
阅读更多...
考研机试C++题目精选

考研机试C++题目精选

更多内容会在godownio.github.io更新 算法练习&#xff08;C代码&#xff09; 考研上机或C语言代码笔试准备&#xff0c;暨大机试原题letcode牛客中南大等高校机试 快速幂算法 题目&#xff1a;输入一个整数 n &#xff0c;求 n^n 的个位数是多少。 快速幂算法&#xff1a;…
阅读更多...
【算法】长短期记忆网络（LSTM，Long Short-Term Memory）

【算法】长短期记忆网络（LSTM，Long Short-Term Memory）

这是一种特殊的循环神经网络&#xff0c;能够学习数据中的长期依赖关系&#xff0c;这是因为模型的循环模块具有相互交互的四个层的组合&#xff0c;它可以记忆不定时间长度的数值&#xff0c;区块中有一个gate能够决定input是否重要到能被记住及能不能被输出output。 原理 黄…
阅读更多...
B端系统：导航机制设计，用户体验提升的法宝

B端系统：导航机制设计，用户体验提升的法宝

Hi&#xff0c;大家好&#xff0c;我是贝格前端工场&#xff0c;从事8年前端开发的老司机。很多B端系统体验不好很大一部分原因在于导航设计的不合理&#xff0c;让用户无所适从&#xff0c;大大降低了操作体验&#xff0c;本文着重分析B端系统的导航体系改如何设计&#xff0c…
阅读更多...
android零基础入门，零基础入门android

android零基础入门，零基础入门android

工欲行其事&#xff0c;必先利其器 1.B4A B4A是Android的基础版&#xff0c;这是一种可简化编程的Android的应用程序开发工具。这是一个IDE&#xff0c;可以允许开发者使用Basic语言来创建Android移动应用。Basic语言是一种过程化编程语言&#xff0c;因为其简单易学&#xff…
阅读更多...
SCA软件成分同源分析-代码匹配技术

SCA软件成分同源分析-代码匹配技术

被检项目源代码的识别在多个语言解析器的支持下工作&#xff0c;根据不同匹配算法&#xff0c;可以计算与特征值索引数据库的匹配情况。针对强匹配算法&#xff0c;源代码的特征值必须与索引数据库的特征值一致&#xff0c;才可认为是该开源组件&#xff1b;针对非强匹配算法&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023