basic，基本问题：如何从表单组件中获取值到应用程序中

Question

所以我已经阅读了 formik 文档，以及十几个 tuts 和示例，但我不了解 formik 和表单的大部分概念。

我正在生成运行dom 玩家标签，然后让用户评价和组织它们。这一切都是为了帮助我学习反应。我需要从单选框和复选框列表中知道他们想要哪些选项。所以我很想知道在我的应用程序状态（顶级）中，用户选择了哪些选项。这是我的应用程序结构的概述。

function App() {
const [tagInventory, setTagInventory] = useState([]);

const latestTag = tagInventory[tagInventory.length - 1] ? tagInventory[tagInventory.length -1] : null;

const handleAdd = (tag) => {
  setTagInventory([ tag, ...tagInventory ]);
}

const makeTag = () => {
    // generates a random gamertag
    **this is where I'd like to take the options from state and make some logical choices about what each tag looks like**
    
    handleAdd(newTag);
}

return(
   // interface to create, delete and rate random gamertags

   // maps tagInventory through <Tag> component

   <UserForm />
)

//from formik examples:
const UserForm = (props) => {
    return (
    <div>
      <h1>Sign Up</h1>
      <Formik
        initialValues={{
          picked: '',
        }}
        onSubmit={async (values) => {
          await new Promise((r) => setTimeout(r, 500));
          alert(JSON.stringify(values, null, 2));
        }}
      >
        {({ values }) => (
          <Form>
            <div id="my-radio-group">Picked</div>
            <div role="group" aria-labelledby="my-radio-group">
              <label>
                <Field type="radio" name="options" value="bothCaps" />
                Capitalize both parts
              </label>
              <label>
                <Field type="radio" name="options" value="frontCap" />
                Only capitalize first letter
              </label>
              <label>
                <Field type="radio" name="options" value="allCaps" />
                All caps
              </label>
              <div>Picked: {values.options}</div>
            </div>

            <button type="submit">Submit</button>
          </Form>
        )}
      </Formik>
    </div>
  );
}

那么如何将 <UserForm> 中的这些选项放入我的应用程序状态？有一些 critical/basic 我只是不明白 formik/React 我想念的东西。我要设置什么道具？

我看到在 <UserForm> 中我可以访问选择的值，但我不知道如何通过 props 发送它。我尝试制作一个选项挂钩，将挂钩更改函数作为 prop 传递，但是 React 在较低级别的组件运行时不喜欢它。

尽量不问愚蠢的问题，但我浏览了大量的帖子、示例和教程，每一个答案都在我的脑海中，假设我知道一些我不知道的东西，或者只包含任何东西UserForm 组件并假设我知道它应该如何与应用程序的其余部分一起工作，但我不知道。

我尝试在 React 中编写一个表单来解决这个问题，但也无济于事。

感谢您的帮助。

Answer 1

将函数传递给 UserForm 并让 UserForm 在需要报告时调用它：

function App () {
  // ...

  // The name "onFormUpdate" is unimportant.
  // Call it whatever makes sense to you.
  const onFormUpdate = values => {
    // update state or whatever you need to do here
  }

  return (
    <UserForm onUpdate={onFormUpdate} />
  );
}

const UserForm = (props) => {
  return (
      <Formik
        onSubmit={async (values) => {
          await new Promise((r) => setTimeout(r, 500));
          props.onUpdate(values); // call the passed-in function with the new data
        }}
      >
      ...

basic，基本问题：如何从表单组件中获取值到应用程序中

basic, basic problem: how to get values from form component into App

reactjs

formik