Question

我们有一个称为React Final Form的表单，希望在该表单中进行选择并创建一个能干的字段。

如何在反应最终形式中使用此类组件。

当前，我尝试在表单内使用Select.Creatable的react-select，但是一旦我从下拉列表中选择了一些内容并更新了状态，表单就会变得清晰，即回到其初始状态。

请帮助！

Answer 1

React Final Form所做的所有工作就是管理表单值。要使用任何第三方组件，您所需要做的就是接受React Final Form给您的$exists = in_array('some_collection', $collectionNames);，并使用React Final Form给您的value回调对其进行更改。

请参阅Third Party Components示例中定义的“适配器”组件以获取指导。

Answer 2

您需要自行更新选项列表。在我的示例中，我使用了组件的状态。

首先使用初始选项创建状态

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <div class="dropdown-button active">
    <a href="." class="category">Home</a>
  </div>
  <div class="dropdown-button">
    <a class="category">A</a>
    <div class="dropdown-container">
      <a class="subject dynamic-loading" href="#">subject 1</a>
      <a class="subject dynamic-loading" href="#">subject 2</a>
      <a class="subject dynamic-loading" href="#">subject 3</a>
    </div>
  </div>
  <div class="dropdown-button">
    <a class="category">B</a>
    <div class="dropdown-container">
      <a class="subject dynamic-loading" href="#">subject 1</a>
      <a class="subject dynamic-loading" href="#">subject 2</a>
      <a class="subject dynamic-loading" href="#">subject 3</a>
    </div>
  </div>
  <div class="dropdown-button">
    <a class="category">C</a>
    <div class="dropdown-container">
      <a class="subject dynamic-loading" href="#">subject 1</a>
      <a class="subject dynamic-loading" href="#">subject 2</a>
      <a class="subject dynamic-loading" href="#">subject 3</a>
    </div>
  </div>
</nav>
<section id="ajax">
  <!-- external html is loaded here -->
</section>

然后更新const [localOptions, setOptions] = useState(props.options);上的列表和所选值

onCreateOption

对于我来说，我有const onCreateOption = (value: string) => { setOptions([...(localOptions || []), { label: value, value }]); input.onChange([...input.value, value]); };形状的选项，并且选择的字段就像字符串数组一样。

如果您不允许选择多个选项，则只需使用不带当前选中字段的值即可，例如{ label: "", value: "" }

使用Select.Creatable和React Final Form

2 个答案: