在同一页面上使用 react-select 十次并为每个 Select 分别保存状态

Question

由于条件原因，我在同一个页面上使用 React-select 十次。

条件是：首先将 select 编辑一天，用户将 select 当天的值。我将使用 bootstrap 轮播，用户将在任何一天再次 select 和 select 他的值。我一直在使用 react-select 获取相同的值，但是现在我每天都需要单独的值。这该怎么做？ bootstrap 轮播是正确的选择吗？我需要帮助。谢谢。

它是一个医疗应用程序，医生会在星期一点击，他会看到时间，他会 select 他星期一的时间。比方说，然后他点击星期三，selects 星期三的单独时间。我会将这些值存储在一个数组中并显示给患者。

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;

Answer 1

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

在同一页面上使用 react-select 十次并为每个 Select 分别保存状态

Using react-select ten times on same page and saving state separately for each Select

reactjs

react-select

react-props

react-component