React学习第二天——表单控件

表单受控组件

受控组件：是通过数据驱动视图
非受控组件：通过ref获取dom对象，类似于原生js操作

• 基本表单受控组件

import { useState } from "react"function App(){//定义变量const [data,setData] = useState('')//input事件function handleChange(e){setData(e.target.value)}//按钮提交事件function handleSubmit(){console.log('你提交的内容是'+ data);}return (<div><input type="text" value={data} onChange={handleChange}></input><button onClick={handleSubmit}>提交</button></div>)
}
export default App

• 对用户输入的内容进行限制

import { useState } from "react"function App(){//定义变量const [data,setData] = useState({value1: '',value2: ''})//input事件function handleChange(e){if(e.target.name === 'one'){//转大写setData({value1: e.target.value.toUpperCase(),})}if(e.target.name === 'two'){//只能输入数字const newVal = e.target.value.split('').map(item=>{if(!isNaN(item)){return item}}).join("")setData({value2: newVal})}}return (<div><input type="text" name="one" value={data.value1} onChange={handleChange} placeholder="转大写"></input><input type="text" name="two" value={data.value2} onChange={handleChange} placeholder="只能输入数字"></input></div>)
}
export default App

• 文本域

import { useState } from "react"function App(){//定义变量const [data,setData] = useState('')//input事件function handleChange(e){setData(e.target.value)}//按钮提交事件function handleSubmit(){console.log('你提交的内容是'+ data);}return (<div><textarea rows="10" cols="20" value={data} onChange={handleChange}></textarea><button onClick={handleSubmit}>提交</button></div>)
}
export default App

• 单选和多选框

import { useState } from "react"
function App(){const [checkList,setCheckList] = useState([{content: 'Html',checked:false},{content: 'Css',checked:false},{content: 'JavaScript',checked:false},{content: 'Vue',checked:false},{content: 'React',checked:false},])function handleClick(item,index){item.checked = !item.checkedcheckList.splice(index,1,item)setCheckList([...checkList])}function handleSubmit(){console.log(checkList,'...');}return (<div>{checkList.map((item,index)=>(<div key={index}><input type="checkbox" onChange={(e)=>handleClick(item,index)} value={item.content} checked={item.checked}></input><span>{item.content}</span></div>))}<button onClick={handleSubmit}>按钮</button></div>)
}
export default App

• 下拉列表

import { useState } from "react"
function App(){const [val,setVal] = useState('HTML')function handleChange(e){console.log(e.target.value);setVal(e.target.value)}return (<div><select value={val} onChange={handleChange}><option value="HTML">Html</option><option value="CSS">css</option><option value="JavaScript">JavaScript</option></select></div>)
}
export default App

非受控组件

import React, { useState } from "react"
function App(){const inputRef = React.createRef()function handleClick(){console.log(inputRef.current.value);}return (<div><input type="text" ref={inputRef}></input><button onClick={handleClick}>按钮</button></div>)
}
export default App

• 非受控组件默认值

<input type="text" ref={inputRef} defaultValue="默认值"></input>

• 文件上传

在React中，<input type="file">始终是一个非受控组件，他只能通过用户设置
import React, { useState } from "react"
function App(){const uploadRef = React.createRef()function handleClick(){console.log(uploadRef.current.files[0]);}return (<div><input type="file" ref={uploadRef} onChange={handleClick}/><button onClick={handleClick}>按钮</button></div>)
}
export default App