如何将 redux 表单的输入道具传递给自定义选择下拉列表

Question

我创建了一个自定义选择，但我不使用标签选择和选项 因为我想自定义每个项目的样式（等效选项标签）。 但我也想使用 redux 表单，我不知道我可以使用 redux-form 的 input props 对我的选择下拉菜单做些什么来控制它

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;

在尝试使用 redux-form 之前，我可以获取和更改值，但我是 redux-form 的新手并在文档中搜索参考，但没有找到可以解决我的问题的东西

Answer 1

在你的 reducer 中，你的初始状态需要如下所示。

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

您的组件，我已将其重命名为 SelectInput，以便在我们将状态映射到 props 时使用 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;