iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 27
0

大綱

  • 文字區塊 (textarea) 與下拉選單 (select)

接續表單的部分來講,React 對 <textarea/><select/> 的使用介面做了些調整,目的是要提高一致性,來使得在操作上更為方便。

<textarea/> 的用法變得更接近 <input/>,並且允許我們在實作時可以指定 value 和 defaultValue。

//不受控
<textarea defaultValue='MAN WITH A MISSION' />
//受控
<textarea value={this.state.helloTo} onChang={this.handleChang} />

<select/> 的用法現在可以接受 value 和 defaultValue 來設定選擇哪些選項。這樣的好處是使其值的操作更佳的容易。

//不受控
<select defaultValue='B'>
  <option value='A'>第一個選項</option>
  <option value='B'>第二個選項</option>
  <option value='C'>第三個選項</option>
</select>
//受控
<select value={this.state.helloTo} onChang={this.handleChang}>
  <option value='A'>第一個選項</option>
  <option value='B'>第二個選項</option>
  <option value='C'>第三個選項</option>
</select>

React 支持多選。哪為了要能使用多選,我們就必須向 value 和 defaultValue 傳送一個陣列,才能達到這個需求。

//不受控
<select multiple='true' defaultValue={['A', 'B']}>
  <option value='A'>第一個選項</option>
  <option value='B'>第二個選項</option>
  <option value='C'>第三個選項</option>
</select>

最後要注意的是,當我們使用多選時,選擇了一些選項之後,下拉選單元件的值並不會更新。只有選項的 selected 屬性改變了。這個時候使用一個給定的 ref 或者 synthecticEvent.target,我們就可以用來存取選項並且來檢查它們是否被選中。


上一篇
[Day26] React - 表單 (上)
下一篇
[Day28] React - 表單 (下)
系列文
好 Js 不學嗎 !? JavaScript 入門中的入門。30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言