时间戳

首页 > 解决方案 > 基于所选儿童数量的动态年龄字段

javascript - 基于所选儿童数量的动态年龄字段

问题描述

我正在尝试创建一个表单字段来获取成人和儿童的数量。根据孩子的数量，我需要显示一个选择字段来了解这些孩子的年龄。我可以创建一个用于添加和删除成人和儿童数量的字段，并且可以根据儿童总数显示年龄字段，但无法保存他们的年龄。

这是我的做法

const Form = () => {
  return (
    <>
      <Formik
        initialValues={{
          traveller: {
            adult: 1,
            children: 0,
            childAge: []
          }
        }}
      >
        {({ handleSubmit, values }) => {
          return (
            <>
              <form onSubmit={handleSubmit}>
                {JSON.stringify(values, null, 2)}
                <TravellerField values={values} />
              </form>
            </>
          );
        }}
      </Formik>
    </>
  );
};

export default Form;

const Index = ({ values }) => {
  return (
    <>
      <Dropdown>
        <Dropdown.Header style={{ width: 400 }}>
          {() => {
            return (
              <div>
                <Button type="button">
                  {values.traveller.adult} adult
                  {values.traveller.children} children
                </Button>
              </div>
            );
          }}
        </Dropdown.Header>
        <Dropdown.Menu
          menuStyle={{
            top: "40px",
            width: 400,
            left: 0,
            right: 0
          }}
        >
          <Dropdown.Item>
            <Wrapper>
              <Inline>
                <Text>Adult</Text>
                <Field name="traveller.adult" component={QuantityField} />
              </Inline>
              <Inline>
                <Text>Children</Text>
                <Field name="traveller.children" component={QuantityField} />
              </Inline>
              {values.traveller.children > 0 &&
                Array.from({ length: values.traveller.children }, (_, i) => {
                  return (
                    <React.Fragment key={i}>
                      <Field name="traveller.childAge" component="select">
                        <option />
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                      </Field>
                    </React.Fragment>
                  );
                })}
            </Wrapper>
          </Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </>
  );
};

为了更清楚我的尝试，我创建了一个沙箱，这里是它的链接

https://codesandbox.io/s/green-moon-pehc1?file=/src/Form.js:115-655

如果您查看它的旅行者字段，这正是我想要的https://www.expedia.com/?pwaLob=wizard-hotel-pwa-v2 。

标签： javascriptreactjsformik

解决方案

只需更改儿童年龄下拉字段的名称即可使用索引

工作演示

像这样

                     <Field
                        name={`traveller.childAge[${i}]`} // <---like this
                        component="select"
                      >
                        <option />
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                      </Field>

阅读更多

推荐阅读