React UI

button

<button type="button" className={isLike ? 'liked' : 'unliked'} 
onClick={()=>{
    setValue(itemValue)
}}>Primary</button>

hidden

<div hidden={value}>
    <p>Hello</p>
</div>

Hint

• 把参数放到组件外 传入

Form

form的每个item里包含label和input, 用div来wrap 每个item(label+input) label里的for和input的id一致(比如username-input).input里的属性比较多，重要的有name, type, required, minlength

select - option

• select option
• JSX <select value={value} onChange={(e)=>setValue(e.target.value)}> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select>

FormData

const formData = new FormData(event.target, event.nativeEvent.submitter);
const intent = formData.get('intent')

Input

在JSX里不是for而是htmlFor

<label htmlFor="input-box">Input</label>

onKeyDown={(e)=>handleKeyDown(e)}
onPaste={(e)=>handlePaste(e)}
onFocus={(e)=>handleFocus(e)}

function handleKeyDown(e){
    if(e.key === 'Enter'){
        // ex:`ArrowLeft` `Backspace` `Enter` `ArrowRight`
        console.log('enter')
    }
}

Validation

• inputMode='numeric'
• pattern='[0-9]*'
• pattern="^[a-zA-Z0-9]+$"
• maxLength='10'

submit

submit里一定不要忘了event.preventDefault()

button

• submit中需要disable input
• 哪些情况需要disable？

Search input

在处理input时候可以用toLowerCase()和trim()来处理

• placeholder

<input type="text" placeholder="Search..." />

textarea

Aria

• aria-hidden
• aria-expanded
• aria-controls
• aria-label