как передать реквизиты ввода в форме редукса в выпадающий список - PullRequest
Новая
       7

как передать реквизиты ввода в форме редукса в выпадающий список

0 голосов
/ 04 июня 2019

Я создаю пользовательский выбор и не использую теги select и параметры, потому что я хочу настроить стили каждого элемента (эквивалентный тег option).но я хочу использовать избыточную форму тоже, и я не знаю, что я могу сделать, чтобы мой выбор выпадающего с входными реквизитами избыточной формы для управления избыточной формой это 

const Select = ({options = [], value, selecionou, inputLabel, valueLabel, input}) => {

    const [listOpen, setListVisibility] = useState(false);
    const [innerValue, setValue] = useState(value)
    const selectItem = o => {
        setListVisibility(false)
        setValue(o[valueLabel])
        selecionou(o[valueLabel])
    }
    const itens = options.map(o => <li key={o[valueLabel]} onClick={() => selectItem(o)}
                                       className={'select-list-item'}>{o[inputLabel]}</li>)
    const getValue = () => {
       const opt = options.filter(v => v[valueLabel] === innerValue)[0]
        if(opt) return opt[inputLabel]
    }

    return (
        <ClickOutside clickOutside={() => setListVisibility(false)}>
            <div className={'select-container'}>
                <div className={'input select-header'} onClick={() => setListVisibility(!listOpen)}>
                    <div className={'select-header-title'}>{innerValue === '' || innerValue == null ? <span className={'placeholder'}>Selecione</span> : getValue()}</div>
                    <i className={`fas fa-caret-down ${listOpen ? 'down' : 'up'}`} />
                </div>
                {(listOpen) && <ul className={'select-list'}>{itens}</ul>}
            </div>
        </ClickOutside>
    );
}
export default Select;

, прежде чем пытаться использовать избыточную форму я могуполучить и изменить значение, но я новичок в избыточной форме и искать ссылки в документации, но не нашел что-то, чтобы решить мою проблему

1 Ответ

2 голосов
/ 04 июня 2019

В вашем редукторе ваше начальное состояние должно выглядеть следующим образом. 

const initialState = {
  options: [],
  value: '',
  selecionou: '',
  inputLabel: '', // change to your default values
  valueLabel: '',
  input: ''
};

Ваш компонент, я переименовал его в SelectInput, чтобы использовать Select, когда мы отображаем состояние в реквизит.

const SelectInput = ({
  options = [],
  value,
  selecionou,
  inputLabel,
  valueLabel,
  input
}) => {
  const [listOpen, setListVisibility] = React.useState(false);
  const [innerValue, setValue] = React.useState(value);
  const selectItem = o => {
    setListVisibility(false);
    setValue(o[valueLabel]);
    selecionou(o[valueLabel]);
  };
  const itens = options.map(o => (
    <li
      key={o[valueLabel]}
      onClick={() => selectItem(o)}
      className={'select-list-item'}
    >
      {o[inputLabel]}
    </li>
  ));
  const getValue = () => {
    const opt = options.filter(v => v[valueLabel] === innerValue)[0];
    if (opt) return opt[inputLabel];
  };

  return (
    <ClickOutside clickOutside={() => setListVisibility(false)}>
      <div className={'select-container'}>
        <div
          className={'input select-header'}
          onClick={() => setListVisibility(!listOpen)}
        >
          <div className={'select-header-title'}>
            {innerValue === '' || innerValue == null ? (
              <span className={'placeholder'}>Selecione</span>
            ) : (
              getValue()
            )}
          </div>
          <i
            className={`fas fa-caret-down ${listOpen ? 'down' : 'up'}`}
          />
        </div>
        {listOpen && <ul className={'select-list'}>{itens}</ul>}
      </div>
    </div>
  );
};

Отображение состояния для реквизита с использованием mapStateToProps

const mapStateToProps = state => {
  let {
    options,
    value,
    selecionou,
    inputLabel,
    valueLabel,
    input
  } = state;

  return {
    options,
    value,
    selecionou,
    inputLabel,
    valueLabel,
    input
  };
};

const Select = connect(mapStateToProps)(SelectInput);
export default Select;
...