handleSubmit没有被调用

Question

我正在开发一个使用trapi作为backenbd并作为前端进行响应的应用程序 我正在使用react挂钩来构建登录表单。但是我的表单提交未调用提交处理程序

import React, { useState } from "react";
const Login = () => {
    const [state, setState] = React.useState({ identifier: '', password: '' });
    const handleChange = ({ target: { name, value } }) =>
      setState(prevState => ({ ...prevState, [name]: value }));

    const handleSubmit = async() => {
        console.log('handleSubmit')
      try {
        const response = await fetch('./auth/local', { method: 'POST', body: state})
        console.log(response)
      } catch(err) {
        console.log(err)
      }
    }

    return (
      <div>

          <label htmlForm="identifier">identifier</label>
          <input
            id="identifier"
            name="identifier"
            onChange={handleChange}
            value={state.identifier}
          />
          <label htmlForm="password">password</label>
          <input
            id="password"
            name="password"
            onChange={handleChange}
            value={state.password}
          />
        <button onClick={() => handleSubmit}></button>
      </div>
    );
  };

  export default Login;

从未调用handleSubmit函数。

Answer 1

您需要触发submit。

您可以添加一个按钮来触发提交，如下所示。

    <div>
      <form onSubmit={handleSubmit}>
        <label htmlForm="identifier">identifier</label>
        <input
          id="identifier"
          name="identifier"
          onChange={handleChange}
          value={state.identifier}
        />
        <label htmlForm="password">password</label>
        <input
          id="password"
          name="password"
          onChange={handleChange}
          value={state.password}
        />
                   ?
        <button type="submit">Submit</button>
      </form>
    </div>

您可以在此沙盒中试用。

Answer 2

<ul>
  <li>
      <dl>
        <dt>Phone:</dt>
        <dd class="phone">333444###</dd>
      </dl>
  </li>
  <li>
      <dl>
        <dt>Phone:</dt>
        <dd class="phone">777888###</dd>
      </dl>
  </li>
</ul>