Conditional dropdowns with react-select and react-final-form field arrays

。_饼干妹妹 提交于 2021-02-17 06:28:25

问题


I'm using react-select with react-final-form and I need to have two selects, where the selected option in the first select dynamically sets the options for the second select. For example, when option One is selected in the first select, the second select gets options One A and One B.

These selects are used in an array. Here is my codesandbox with initial setup https://codesandbox.io/s/react-final-form-field-arrays-e4mm6?fontsize=14.

I've found two similar examples, but I don't know how to adapt them to my use case.

First, I've found this example for react-final-form which sets field's value using createDecorator, but it's used for the value of the field and not the options prop.

Second, I've found this example for react-select which sets options dynamically using state, but I don't know how I can adapt it to my case, considering field arrays.

I would appreciate any help.


回答1:


Interesting, problem. Here ya go. I created a <PickOptions/> component that watches the first field and provides the options to the second. It also clears the second field when the value of the first changes, which seemed like something you'd want. You could also set it to the first option in the array or something...



来源:https://stackoverflow.com/questions/58422329/conditional-dropdowns-with-react-select-and-react-final-form-field-arrays

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!