Выпадающий список не перерисовывается со значением по умолчанию - PullRequest
Новая
       24

Выпадающий список не перерисовывается со значением по умолчанию

0 голосов
/ 17 апреля 2020

Так как есть один раскрывающийся список, который приносит множественный раскрывающийся список из вариантов, выбранных в первом раскрывающемся списке. Задано значение по умолчанию для нескольких раскрывающихся меню. Но когда я выбираю любую опцию из выбранного раскрывающегося списка, значение по умолчанию изменяется на предыдущее установленное значение, которое в этом случае мне нужно значение по умолчанию.

Поскольку компонент BodyColorMenu в данном случае содержит список раскрывающегося стиля, который обрабатывает несколько раскрывающихся цветов. Что касается этих опций стиля путем вызова метода bodyTypeChange, который просто устанавливает мое состояние, он не имеет к этому никакого отношения. Как и в этом методе, устанавливается Styletype, который передается с использованием реквизита, из которого теперь отображается несколько выпадающих списков. Как и в раскрывающемся компоненте, значение по умолчанию установлено равным none из значения параметра.

Теперь проблема заключается в том, что я выбираю значение цвета из параметра стиля и теперь, когда я изменить опцию стиля Мне нужно, чтобы значение по умолчанию было установлено как none, но в этом случае оно устанавливает значение цвета как выбранное значение из предыдущей опции стиля.

Спасибо за вашу помощь заранее. 

import React from 'react'
import Dropdown from './../../../../Dropdown'
import './../../rightSidebar.scss'
import ColorBox from '../../../../ColorBox'

const BodyColorMenu = (props) => {

  const { onColorChange, bodyTypeChange, styleType, hoodieData } = props

  // const features = hoodieData.bodyParams;
  const pageControl = (styleType) => {
    switch (styleType) {
      case "solid":
        return (<React.Fragment>
          <Dropdown name="body" onColorChange={onColorChange}></Dropdown>
        </React.Fragment>)
      case "2-panel-top":
        return (<React.Fragment>
          <Dropdown name="body-2" onColorChange={onColorChange}>Body</Dropdown>
          <Dropdown name="body" onColorChange={onColorChange}>Bottom</Dropdown>
        </React.Fragment>)
      case "3-panel":
        return (<React.Fragment>
          <Dropdown name="body-2" onColorChange={onColorChange}>Body</Dropdown>
          <Dropdown name="body-3" onColorChange={onColorChange}>Middle</Dropdown>
          <Dropdown name="body" onColorChange={onColorChange}>Bottom</Dropdown>
        </React.Fragment>)
      case "2-panel-middle":
        return (<React.Fragment>
          <Dropdown name="body" onColorChange={onColorChange}>Body</Dropdown>
          <Dropdown name="body-4" onColorChange={onColorChange}>Bottom</Dropdown>
        </React.Fragment>)
      case "band-panel":
        return (<React.Fragment>
          <Dropdown name="body" onColorChange={onColorChange}>Body</Dropdown>
          <Dropdown name="body-5" onColorChange={onColorChange}>Band</Dropdown>
        </React.Fragment>)
      default:
        break;
    }
  }

  return (
    <React.Fragment>
      <div className="form-group border-bottom px-4 py-3 mb-0">
        <label>Style</label>
        <select className="form-control" value={styleType} onChange={bodyTypeChange}>
          <option value={"solid"}>Solid</option>
          <option value={"2-panel-top"}>Split at the top</option>
          <option value={"2-panel-middle"}>Split in the middle</option>
          <option value={"3-panel"}>Middle panel</option>
          <option value={"band-panel"}>Side band</option>
        </select>
      </div>

      <div className="form-group border-bottom px-4 py-3 mb-0">
        <ColorBox>{pageControl(styleType)}</ColorBox>
      </div>
    </React.Fragment>
  )
}

export default BodyColorMenu

const bodyTypeChange = (event) => {
    let type = event.target.value
    let bodyParams = {
      "body": {
        "color": hoodieData.bodyParams['body'] ? hoodieData.bodyParams['body'].color : "#ffffff"
      }
    }
    setStyleType(type)
    switch (type) {
      case "2-panel-top":
        bodyParams["body-2"] = { "color": "#ffffff" }
        break;
      case "3-panel":
        bodyParams["body-2"] = { "color": "#ffffff" }
        bodyParams["body-3"] = { "color": "#ffffff" }

        break;
      case "2-panel-middle":
        bodyParams["body-4"] = { "color": "#ffffff" }
        break;
      case "band-panel":
        bodyParams["body-5"] = { "color": "#ffffff" }
        break;
      default:
        break;
    }
    setHoodieData(prevState => {
      let hoodiePrevState = prevState
      hoodiePrevState.bodyParams = bodyParams
      return hoodiePrevState
    })
  }

import React from 'react'
import './dropdown.scss'

const Dropdown = (props) => {

  const { name, onColorChange, children } = props
  return (
    <React.Fragment>
        <label htmlFor="outlined-age-native-simple" className="inner-label">{children}</label>
        <select className="form-control" defaultValue="none" onChange={(event) => onColorChange(event, name)}>
          <option value="none" disabled>Select Color</option>
          <option value="#FFFFFF">White</option>
          <option value="#000000">Black</option>
          <option value="#FF0000">Red</option>
          <option value="#008000">Green</option>
          <option value="#FFFF00">Yellow</option>
        </select>
    </React.Fragment>
  )
}

export default Dropdown
...