关于reactjs：如何将Redux表单的输入props传递给自定义选择下拉菜单


how pass input props of redux form to custom select dropdown

我创建了一个自定义选择，但我不使用标签选择和选项
因为我要自定义每个项目的样式(等效选项标签)。
但我也想使用redux表单，我不知道我可以对redux-form的输入道具进行选择下拉菜单，以进行redux-form的控制吗

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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)}>
           
                 setListVisibility(!listOpen)}>
                    {innerValue === '' || innerValue == null ? <span className={'placeholder'}>Selecione</span> : getValue()}
                    <i className={`fas fa-caret-down ${listOpen ? 'down' : 'up'}`} />
               
                {(listOpen) && <ul className={'select-list'}>{itens}
</ul>
}
           
        </ClickOutside>
    );
}
export default Select;

在尝试使用redux-form之前，我可以获取和更改值，但是我是redux-form的新手，可以在文档中搜索引用，但是找不到解决我问题的方法

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

1
2
3
4
5
6
7
8
const initialState = {
  options: [],
  value: '',
  selecionou: '',
  inputLabel: '', // change to your default values
  valueLabel: '',
  input: ''
};

您的组件，当我们将状态映射到道具时，我已将其重命名为SelectInput以使用Select。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
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={'input select-header'}
          onClick={() => setListVisibility(!listOpen)}
        >
         
            {innerValue === '' || innerValue == null ? (
              <span className={'placeholder'}>Selecione</span>
            ) : (
              getValue()
            )}
         
          <i
            className={`fas fa-caret-down ${listOpen ? 'down' : 'up'}`}
          />
       
        {listOpen && <ul className={'select-list'}>{itens}
</ul>
}
     
   
  );
};

使用mapStateToProps

将状态映射到道具

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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;
相关讨论