Question

步骤：用户在表格的第一个问题中进行选择。结果答案将用于构建一系列复选框，作为表单的第二个问题。

我能够使代码正确显示复选框。

但是我不知道那之后该怎么办。呈现复选框后，我需要使用复选框的值来初始化作为键值对{checkboxName1:false, checkboxName2:false}的对象（将是状态的一部分）。然后，随着复选框的选择，对象将被更新。因此，如果用户检查了checkboxName1，则该对象将更新为：{checkboxName1:true, checkboxName2:false}

然后，我需要使用表单的“提交”按钮保存整个表单（Q1和Q2）中的数据。第二个问题的数据将用于驱动另一个屏幕上的输出。

这个问题似乎与我正在寻找的问题最接近：How to set input value of one field based on another field in formik?，但它们仅使用Q1的输入来驱动Q2形式的输出（而不是其他输入）。

这是我的基本代码：

  const initialValues = {
    selectedCategory: "",
  };



function handleSubmit() {
    console.log("Handle submit");
  }



function buildIngredientsChoice(groceryCategory) {
    console.log(groceryCategory);

    const ingredientsInChosenCategory = indgredientCategories.filter(
      (each) => each.category === groceryCategory
    );

    //Middle ground:
    const justArrayOfIngredients =
      ingredientsInChosenCategory[0]["ingredients"];

    // Build obj of ingredients:
    const objOfIngredientsCheckboxes = ingredientsInChosenCategory[0][
  "ingredients"
].reduce((o, key) => ({ ...o, [key]: false }), {});

console.log(justArrayOfIngredients);

return justArrayOfIngredients.map((each, index) => (
  <CommonCheckbox key={index} title={each}></CommonCheckbox>
));}



<Formik initialValues={initialValues} onSubmit={handleSubmit}>
          {(formik) => (
            <>
              <View>
                <Picker
                  // passing value directly from formik
                  selectedValue={formik.values.selectedCategory}
                  // changing value in formik
                  onValueChange={(itemValue) =>
                    formik.setFieldValue("selectedCategory", itemValue)
                  }
                >
                  <Picker.Item
                    label="Select your category"
                    value={initialValues.selectedCategory}
                    key={0}
                  />

                  <Picker.Item label="Produce" value="produce" key={1} />
                  //A bunch of items in Picker. 
              </View>
                //This renders the checkboxes correctly but that's where U get stuck: 
              {formik.values.selectedCategory
                ? buildIngredientsChoice(formik.values.selectedCategory)
                : null}
              {/* submitting formik instead of calling this.handleSubmit directly */}
              <Button title="Submit" onPress={formik.handleSubmit} />
            </>
          )}
        </Formik>

如果您在Android手机上下载了Expo应用程序，则可以在此处查看该应用程序：https://expo.io/@sabbygirl99/recipe-project-mobile

Answer 1

我想的第一个问题是提交您的表格。您必须通过单击按钮将<template> <section class="hero"> <div class="hero-body"> <div class="container"> <b-table :data="downloads" ref="table" :loading="isLoading" hoverable detailed detail-key="version" selectable @select="toggle" > <template slot-scope="props"> <b-table-column class="is-unselectable" cell-class="has-pointer-cursor" field="version" label="Version" width="70" > <span class="tag is-info">{{ props.row.version }}</span> </b-table-column> <b-table-column class="is-unselectable" cell-class="has-pointer-cursor" field="download_count" label="Download Count" sortable numeric >{{ props.row.download_count.toLocaleString() }}</b-table-column> <b-table-column class="is-unselectable" cell-class="has-pointer-cursor" field="release_date" label="Release Date" sortable centered >{{props.row.release_date ? new Date(props.row.release_date).toLocaleDateString() : "unknown"}}</b-table-column> </template> <template slot="empty"> <section v-if="!isLoading" class="section"> <div class="content has-text-grey has-text-centered"> <p>Looks like it was not possible to load the data.</p> </div> </section> </template> <template slot="detail" slot-scope="props"> <article class="media"> <div class="media-content">Some text. <hr>Some other text. </div> </article> </template> <template slot="footer"> <div v-if="!isLoading" class="has-text-right">This is a footer.</div> </template> </b-table> </div> </div> </section> </template> <script> export default { name: "HelloWorld", data() { return { downloads: [], isLoading: true }; }, mounted() { this.downloads = [ { version: "1.5", download_count: 500, release_date: new Date() }, { version: "1.4", download_count: 400, release_date: new Date() }, { version: "1.3", download_count: 300, release_date: new Date() }, { version: "1.2", download_count: 200, release_date: new Date() }, { version: "1.1", download_count: 100, release_date: new Date() } ]; this.isLoading = false; }, methods: { toggle(row) { this.$refs.table.toggleDetails(row); } } }; </script>  <style lang="scss" scoped> h3 { margin: 40px 0 0; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } //This is how I expect it should work. .table.is-hoverable tbody tr.detail:not(.is-selected):hover { background-color: rgb(218, 11, 11) !important; } //Applying the property to the .detail { background-color: rgb(218, 11, 11) !important; } .media { background-color: yellow !important; } </style>事件处理程序绑定：

submitForm

另一件事是，您还必须将<Button title="Submit" onPress={formik.submitForm} />或onChange与复选框绑定。而且我认为您应该呈现复选框（您已经在做），但是当复选框的值为setFieldValue时，将成分存储在数组中。

true

是否可以在Formik的一个输入字段中进行选择来驱动在Formik的另一个输入字段中创建DOM？

1 个答案: