Question

我创建了一个自定义选择，但我不使用标签选择和选项因为我要自定义每个项目的样式（等效选项标签）。但是我也想使用redux表单，我不知道该如何使用redux-form的输入道具来进行选择下拉列表工作，以实现redux-form的控制

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

在减速器中，您的初始状态需要如下所示。

onFirstDataRendered(event) {
  this.pinnedBottomRowData = this.createData();
}

createData() {
  const result = [];
  result.push({
    country:`count:${this.countCountries()}`,
  });
  return result;
}

您的组件，在将状态映射到道具时，我将其重命名为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

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

1 个答案: