时间戳

首页 > 解决方案 > React Select Tag :: 根据另一个选择更改选择选项

reactjs - React Select Tag :: 根据另一个选择更改选择选项

问题描述

我正在使用 atlaskit 选择标签，我有两个选择标签。在选择第一个时，我必须从另一个选择标签中获取价值。

我的第一个选择包含 3 个选项：天、周和月。在选择任何选项时，我得到了特定的数据，例如：如果是第 1 到 31 天，则必须显示数字，如果是星期，则必须显示 1 到 6 个数字，如果是第 1 到 12 个月，则必须显示数字。


var Days=[];
for(let i=1;i<=31;i++){
  Days.push({
    label : i,
    value : i
  })
}

var weeknumber = [];
for(let j=1;j<=7 ;j++){
  weeknumber.push({
    label :j,
    value :j
  })
}

var monthnum = [];
for(let k=1 ;k<=12 ; k++){  
  monthnum.push({
    label : k,
    value : k
  })
}
repeatoptn : [
    {value : 'Day',label:'Day'},
    {value:'Week',label:'Week'},
    {value:'Month',label:'Month'}
],
reptdata : []


  handleRepeatOn = (repeatonevery) =>{

    if(this.state.repeat == 'Day'){
      this.setState({reptdata : Days})
    }
    else if(this.state.repeat == 'Week'){
     this.setState({reptdata : weeknumber})
    }
    else {    
      this.setState({reptdata : monthnum})
    }
    this.setState({
      repeatonevery 
    })
  }
<Select
  className="single-select"
  classNamePrefix="react-select"
  options={this.state.repeatoptn}
  styles={customStyles}
  onChange = {this.handleRepeat}
  value = {this.state.repeat}
 /> 
<Select
  className="single-select"
  classNamePrefix="react-select"
  options={this.state.reptdata }
  styles={customStyles}
  onChange = {this.handleRepeatOn}
  value = {this.state.repeatonevery}
 />

如何实施？谢谢

标签： reactjs

解决方案

请看一下我尝试整理的示例，还有很多需要改进的地方，但我认为这可能是一个很好的代码库供您参考。

此外，请参阅 Select API 文档以查看更多示例和道具，这可能会对您有所帮助。https://atlaskit.atlassian.com/packages/core/select/docs/api

链接示例：https ://codesandbox.io/embed/atlaskitselect-00-single-select-91omr?fontsize=14&hidenavigation=1&theme=dark

import React, { useEffect, useState } from 'react';
import Select from '@atlaskit/select';

const dataSelectType = [
  {value: undefined,label:'None'},
  {value:'date',label:'Date'},
  {value:'month',label:'Month'},
  {value:'year',label:'Year'},
];

const dataDate = [
  {value:'1',label:'1st'},
  {value:'2',label:'2nd'},
  {value:'3',label:'3rd'}
];

const dataMonth = [
  {value:'jan',label:'January'},
  {value:'feb',label:'February'},
  {value:'mar',label:'March'}
];

const dataYear = [
  {value:'2018',label:'2018'},
  {value:'2019',label:'2019'},
  {value:'2020',label:'2020'},
];

const SingleExample = () => {
  const [dataType, setType] = useState([]);
  const [currentType, setCurrentType] = useState(undefined);
  const [dataSelect2, setDataSelect2] = useState([]);

  const onChangeSelect1 = (value) => {
    console.log('onChangeSelect1 val: ', value);
    setCurrentType(value.value)
  }

  const onChangeSelect2 = (value) => {
    console.log('val 2: ', value);
  }

  useEffect(() => {
    console.log('type: ', currentType);
    if (!currentType)
      setDataSelect2([])

    if (currentType === 'month')
      setDataSelect2(dataMonth);
    if (currentType === 'year')
      setDataSelect2(dataYear);
    if (currentType === 'date')
      setDataSelect2(dataDate);
  }, [currentType]);

  useEffect(() => setType(dataSelectType), [])

  return (
    <div>
      <Select
        className="single-select"
        classNamePrefix="react-select"
        options={dataType}
        placeholder="Choose a type"
        onChange = {onChangeSelect1}
      />

      <Select
        className="single-select"
        classNamePrefix="react-select"
        options={dataSelect2}
        placeholder="Choose ..."
        onChange = {onChangeSelect2}
      />
    </div>
  )
}

export default SingleExample;

推荐阅读