人妻被按摩到潮喷中文不卡,免费精品国产自产拍在线

當選項過多時，使用下拉菜單展示并選擇內容。

基礎用法

適用廣泛的基礎單選

value的值為當前被選中的Option的 value 屬性值

constructor(props) {
  super(props);


  this.state = {
    options: [{
      value: '選項1',
      label: '黃金糕'
    }, {
      value: '選項2',
      label: '雙皮奶'
    }, {
      value: '選項3',
      label: '蚵仔煎'
    }, {
      value: '選項4',
      label: '龍須面'
    }, {
      value: '選項5',
      label: '北京烤鴨'
    }],
    value: ''
  };
}
render() {
  return (
      <Select value={this.state.value} placeholder="請選擇">
        {
          this.state.options.map(el => {
            return <Select.Option key={el.value} label={el.label} value={el.value} />
          })
        }
      </Select>
  )
}

有禁用選項

在Option中，設定disabled值為 true，即可禁用該選項

constructor(props) {
  super(props);


  this.state = {
    options: [{
      value: '選項1',
      label: '黃金糕'
    }, {
      value: '選項2',
      label: '雙皮奶',
      disabled: true
    }, {
      value: '選項3',
      label: '蚵仔煎'
    }, {
      value: '選項4',
      label: '龍須面'
    }, {
      value: '選項5',
      label: '北京烤鴨'
    }],
    value: ''
  };
}


render() {
  return (
    <Select value={this.state.value}>
      {
        this.state.options.map(el => {
          return <Select.Option key={el.value} label={el.label} value={el.value} disabled={el.disabled} />
        })
      }
    </Select>
  )
}

禁用狀態(tài)

選擇器不可用狀態(tài)

為Select設置disabled屬性，則整個選擇器不可用

constructor(props) {
  super(props);


  this.state = {
    options: [{
      value: '選項1',
      label: '黃金糕'
    }, {
      value: '選項2',
      label: '雙皮奶'
    }, {
      value: '選項3',
      label: '蚵仔煎'
    }, {
      value: '選項4',
      label: '龍須面'
    }, {
      value: '選項5',
      label: '北京烤鴨'
    }],
    value: ''
  };
}


render() {
  return (
    <Select value={this.state.value} disabled={true}>
      {
        this.state.options.map(el => {
          return <Select.Option key={el.value} label={el.label} value={el.value} />
        })
      }
    </Select>
  )
}

可清空單選

包含清空按鈕，可將選擇器清空為初始狀態(tài)

為Select設置clearable屬性，則可將選擇器清空。需要注意的是，clearable屬性僅適用于單選。

constructor(props) {
  super(props);


  this.state = {
    options: [{
      value: '選項1',
      label: '黃金糕'
    }, {
      value: '選項2',
      label: '雙皮奶'
    }, {
      value: '選項3',
      label: '蚵仔煎'
    }, {
      value: '選項4',
      label: '龍須面'
    }, {
      value: '選項5',
      label: '北京烤鴨'
    }],
    value: ''
  };
}


render() {
  return (
    <Select value={this.state.value} clearable={true}>
      {
        this.state.options.map(el => {
          return <Select.Option key={el.value} label={el.label} value={el.value} />
        })
      }
    </Select>
  )
}

基礎多選

適用性較廣的基礎多選，用 Tag 展示已選項

為Select設置multiple屬性即可啟用多選，此時value的值為當前選中值所組成的數組

constructor(props) {
  super(props);


  this.state = {
    options: [{
      value: '選項1',
      label: '黃金糕'
    }, {
      value: '選項2',
      label: '雙皮奶'
    }, {
      value: '選項3',
      label: '蚵仔煎'
    }, {
      value: '選項4',
      label: '龍須面'
    }, {
      value: '選項5',
      label: '北京烤鴨'
    }],
    value: []
  };
}


render() {
  return (
    <Select value={this.state.value} multiple={true}>
      {
        this.state.options.map(el => {
          return <Select.Option key={el.value} label={el.label} value={el.value} />
        })
      }
    </Select>
  )
}

自定義模板

可以自定義備選項

將自定義的 HTML 模板插入Option中即可。

constructor(props) {
  super(props);


  this.state = {
    cities: [{
      value: 'Beijing',
      label: '北京'
    }, {
      value: 'Shanghai',
      label: '上海'
    }, {
      value: 'Nanjing',
      label: '南京'
    }, {
      value: 'Chengdu',
      label: '成都'
    }, {
      value: 'Shenzhen',
      label: '深圳'
    }, {
      value: 'Guangzhou',
      label: '廣州'
    }],
    value: []
  };
}


render() {
  return (
    <Select value={this.state.value}>
      {
        this.state.cities.map(el => {
          return (
            <Select.Option key={el.value} label={el.label} value={el.value}>
              <span style={{float: 'left'}}>{el.label}</span>
              <span style={{float: 'right', color: '#8492a6', fontSize: 13}}>{el.value}</span>
            </Select.Option>
          )
        })
      }
    </Select>
  )
}

分組

備選項進行分組展示

使用OptionGroup對備選項進行分組，它的label屬性為分組名

constructor(props) {
  super(props);


  this.state = {
    options: [{
      label: '熱門城市',
      options: [{
        value: 'Shanghai',
        label: '上海'
      }, {
        value: 'Beijing',
        label: '北京'
      }]
    }, {
      label: '城市名',
      options: [{
        value: 'Chengdu',
        label: '成都'
      }, {
        value: 'Shenzhen',
        label: '深圳'
      }, {
        value: 'Guangzhou',
        label: '廣州'
      }, {
        value: 'Dalian',
        label: '大連'
      }]
    }],
    value: ''
  };
}


render() {
  return (
    <Select value={this.state.value}>
      {
        this.state.options.map(group => {
          return (
            <Select.OptionGroup key={group.label} label={group.label}>
              {
                group.options.map(el => {
                  return (
                    <Select.Option key={el.value} label={el.label} value={el.value}>
                      <span style={{float: 'left'}}>{el.label}</span>
                      <span style={{float: 'right', color: '#8492a6', fontSize: 13}}>{el.value}</span>
                    </Select.Option>
                  )
                })
              }
            </Select.OptionGroup>
          )
        })
      }
    </Select>
  )
}

可搜索

可以利用搜索功能快速查找選項

為Select添加filterable屬性即可啟用搜索功能。默認情況下，Select 會找出所有label屬性包含輸入值的選項。如果希望使用其他的搜索邏輯，可以通過傳入一個filterMethod來實現。filterMethod為一個Function，它會在輸入值發(fā)生變化時調用，參數為當前輸入值。

constructor(props) {
  super(props);


  this.state = {
    options: [{
      value: '選項1',
      label: '黃金糕'
    }, {
      value: '選項2',
      label: '雙皮奶'
    }, {
      value: '選項3',
      label: '蚵仔煎'
    }, {
      value: '選項4',
      label: '龍須面'
    }, {
      value: '選項5',
      label: '北京烤鴨'
    }],
    value: []
  };
}


render() {
  return (
    <Select value={this.state.value} filterable={true}>
      {
        this.state.options.map(el => {
          return <Select.Option key={el.value} label={el.label} value={el.value} />
        })
      }
    </Select>
  )
}

遠程搜索

從服務器搜索數據，輸入關鍵字進行查找

為了啟用遠程搜索，需要將filterable和remote設置為true，同時傳入一個remoteMethod。remoteMethod為一個Function，它會在輸入值發(fā)生變化時調用，參數為當前輸入值。

constructor(props) {
  super(props);


  this.state = {
    options: [],
    states: ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware",   "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas",
    "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"]
  }
}


onSearch(query) {
  if (query !== '') {
    this.setState({
      loading: true
    });


    setTimeout(() => {
      this.setState({
        loading: false,
        options: this.state.states.map(item => {
          return { value: item, label: item };
        }).filter(item => {
          return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
        })
      });
    }, 200);
  } else {
    this.setState({
      options: []
    });
  }
}


render() {
  return (
    <Select value={this.state.value} multiple={true} filterable={true} remote={true} remoteMethod={this.onSearch.bind(this)} loading={this.state.loading}>
      {
        this.state.options.map(el => {
          return <Select.Option key={el.value} label={el.label} value={el.value} />
        })
      }
    </Select>
  )
}

Select Attributes

參數	說明	類型	可選值	默認值
multiple	是否多選	boolean	—	false
disabled	是否禁用	boolean	—	false
clearable	單選時是否可以清空選項	boolean	—	false
name	select input 的 name 屬性	string	—	—
placeholder	占位符	string	—	請選擇
filterable	是否可搜索	boolean	—	false
filterMethod	自定義過濾方法	function	—	—
remote	是否為遠程搜索	boolean	—	false
remoteMethod	遠程搜索方法	function	—	—
loading	是否正在從遠程獲取數據	boolean	—	false

Select Events

事件名稱	說明	回調參數
onChange	選中值發(fā)生變化時觸發(fā)	目前的選中值
onVisibleChange	下拉框出現/隱藏時觸發(fā)	出現則為 true，隱藏則為 false
onRemoveTag	多選模式下移除tag時觸發(fā)	移除的tag值
onClear	可清空的單選模式下用戶點擊清空按鈕時觸發(fā)	-

Option Group Attributes

參數	說明	類型	可選值	默認值
label	分組的組名	string	—	—
disabled	是否將該分組下所有選項置為禁用	boolean	—	false

Option Attributes

參數	說明	類型	可選值	默認值
value	選項的值	string/number/object	—	—
label	選項的標簽，若不設置則默認與 `value` 相同	string/number	—	—
disabled	是否禁用該選項	boolean	—	false

Element-React Select 選擇器