表单提交事件未正确发送

Question

我正在编写一段用 react-bootstrap 编写的代码，包括 FormControl 和 InputGroup。事情看起来像：

  const formRef = useRef(null);

  return (
    <Container
      fluid={true}
      className={[styles.container, 'justify-content-start flex-column'].join(
        ' '
      )}
    >
      <Form
        onSubmit={e => console.log('submitting:', e)}
        className={styles.searchForm}
        ref={formRef}
      >
        <div className={styles.searchInput}>
          <div className={styles.inputWrapper}>
            <InputGroup className={styles.inputGroup}>
              <FormControl
                placeholder='Locality'
                aria-label='Search locality'
              />
              <InputGroup.Append>
                <Icon
                  icon={faMapMarker}
                  classes={styles.searchInputOpaqueIcon}
                  onClick={async () => {
                    try {
                      const position = await getPosition();
                      setPosition(position);
                    } catch (err) {
                      console.error(err.message);
                    }
                  }}
                />
              </InputGroup.Append>
            </InputGroup>
          </div>
          <div className={styles.inputWrapper}>
            <InputGroup>
              <FormControl placeholder='Search...' aria-label='Search string' />
              <InputGroup.Append>
                <Icon
                  icon={faSearch}
                  classes={styles.searchInputIcon}
                  onClick={() => {
                    formRef.current.dispatchEvent(
                      new Event('submit', { cancelable: true })
                    );
                    console.log('dispatched submit');
                  }}
                />
              </InputGroup.Append>
            </InputGroup>
          </div>
        </div>
        <Icon onClick={close} icon={faTimesCircle} classes={styles.closeIcon} />
      </Form>
    </Container>
  );

我的印象是像上面那样调度提交事件应该触发表单提交，因此 onSubmit。这没有发生。我从控制台日志中看到 dispatch 已经完成并且从未调用过 onSubmit。

Answer 1

这有效：

            <Icon
              icon={faSearch}
              classes={styles.searchInputIcon}
              onClick={() => {
                if (typeof formRef.current.requestSubmit === 'function') {
                  formRef.current.requestSubmit();
                  console.log('requested submit');
                } else {
                  formRef.current.dispatchEvent(
                    new Event('submit', { cancelable: true })
                  );
                  console.log('dispatched submit');
                }
              }}
            />

表单提交事件未正确发送

Form submit event is not dispatched correctly

javascript

reactjs

react-bootstrap