0

由于某种情况，我在同一页面上使用了十次 React-select。

条件是：首先将选择一天，用户将选择该天的值。我将使用引导轮播，用户将在任何一天再次选择并选择他的值。我在所有日子都使用 react-select 来获取相同的值，但是现在我每天都需要单独的值。这个怎么做？引导轮播是正确的选择吗？我需要帮助。谢谢你。

它是一个医疗应用程序，博士将在星期一单击，他将显示时间，他将选择星期一的时间。假设，然后他点击星期三并选择星期三的单独时间。我会将这些值存储在一个数组中并显示给患者。

class DoctorSelectDay extends Component {
state = { 
       options: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].map(obj => {
       return {value: `${obj}`, label: `${obj}`}
    }),
optionValues: [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
],
      open_id: [],
  };

changeHandler = e => {
    this.setState({ open_id: e ? e.map(x => x.value) : [] });
    console.log(this.state.open_id)
  };

render() {
    return (
          <div>
          <Select
            isMulti
            name="open_id"
            value={this.state.options.filter(item => this.state.open_id.includes(item.value))}
            onChange={this.changeHandler}
            options={this.state.options}
            className='select'
          /> 
          <button onClick={() =>{this.saveState()}} className='button-left'>Select Days</button>
          </div>
          )
    }
  }
export default DoctorSelectDay;
4

1 回答 1

0

我认为您不应该使用数组来保存数据。您正在尝试获取每天的计时数据，这是键值对的经典用例，例如{MON:'13:00-13:30'....}，所以我认为您可以使用 2 个选择元素，一个用于日值，一个用于时间值（希望我理解您，但是原理相同）当用户选择日期时，您将设置日期值的状态 setState({currentlySelectedDay:dayValue}) 然后用户将选择计时，您将保存状态setState({daysTiming[this.state.currentlySelectedDay]=timingValue}) 隐藏/显示元素的指示是currentSelectedDay的值如果为空则显示天数如果不显示时间. 此外，您应该在保存时间的同时清除日期值。希望这对你有用。

于 2020-07-14T11:17:09.810 回答