Javascript 反应所需输入

我正试图在表格中输入姓名和电子邮件。我最初将

嵌套在

中，并发现

本身可以允许需要输入，但当它嵌套在

中时，它并不需要输入。然后，我将链接添加到

submitSurvey

函数中，并将

从渲染中移除。它仍然不需要输入。 这是我的

namemailcomponent.js

：

import React, { useState } from "react";
import { NameInput } from "../inputs/NameInput";
import { EmailInput } from "../inputs/EmailInput";
import { useHistory } from "react-router-dom";

export const NameEmailComponent = (props) => {
  const [surveyValues, setSurveyValues] = useState({});
  const [inlineData, setInlineData] = useState({});
  const [question, setQuestion] = useState({});
  const history = useHistory();
  console.log(props);

  const triggerBackendUpdate = () => {
    setSurveyValues({});
    setQuestion({});
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    event.persist();
    setSurveyValues(surveyValues);
    setQuestion(question);
    triggerBackendUpdate();
  };
  const callback = (name, value) => {
    console.log("Form Data: ", name, ": ", value);
    inlineData[name] = value;
    setInlineData(inlineData);
    console.log(inlineData);
  };

  const handleChange = (event) => {
    event.preventDefault();
    this.setState({ value: event.target.value });
    console.log("Name: ", event.target.value);
  };
  const submitSurvey = async () => {
    try {
      await fetch("/api/survey", {
        method: "POST",
        body: JSON.stringify(inlineData),
        headers: {
          "Content-Type": "application/json",
        },
      });
      history.push({ pathname: "/survey" });
    } catch (err) {
      console.log(err);
    }
  };


  const inputs = props.inputs
    ? props.inputs.filter((inputOption) => inputOption)
    : [];

  return (
    <>
      <div id="nameContainer" className="form-group">
        <form onSubmit={handleSubmit}>
          {inputs.map((data, index) => {
            let inputKey = `input-${index}`;
            return data.type === "text" ? (
              <NameInput
                className="form-control my-3"
                triggerCallback={callback}
                name={data.name}
                type={data.type}
                placeholder={data.placeholder}
                required={true}
                onChange={handleChange}
                key={inputKey}
              />
            ) : (
              <EmailInput
                className="form-control mt-3"
                triggerCallback={callback}
                name={data.name}
                type={data.type}
                placeholder={data.placeholder}
                required={true}
                onChange={handleChange}
                key={inputKey}
              />
            );
          })}
          <div className="col-6 mx-auto text-center">
            <div className="button">
              <button
                className="btn btn-primary mt-4 mb-2 mx-5"
                type="submit"
                onClick={submitSurvey}
              >
                Begin Survey
              </button>
            </div>
          </div>
        </form>
      </div>
    </>
  );
};

import React from "react";
import { useInputChange } from "../Hooks/useInputChangeHook";
import { isTextInput } from "../validators";

export const NameInput = (props) => {
  const inputType = isTextInput(props.type) ? props.type : "text";
  const { handleChange } = useInputChange(
    props.defaultValue,
    props.triggerCallback,
    inputType
  );

  const inputProps = {
    className: props.className ? props.className : "form-control",
    onChange: handleChange,
    required: props.required,
    question: props.question,
    placeholder: props.placeholder,
    type: inputType,
    options: props.options,
    name: props.name ? props.name : `${inputType}_${props.key}`,
  };

  return (
    <>
      <div id={props.name}>
        <input
          {...inputProps}
          required={props.required}
          value={props.value || ""}
        />
      </div>
    </>
  );
};

---

在

submitSurvey

函数中进行API调用之前，您是否意识到正在推送路径名？@PrateekThapa不，我没有，我更正了，谢谢。同样，在javascript中，这不是处理异步操作的方法。查看该函数应该是什么，并相应地更新您的代码。@PrateekThapa好的，我想我已经正确地编辑了它。查看您的代码，您对表单有两种不同的操作。您正在将

handleSubmit

传递到表单，并将

submitSurvey

传递到表单提交按钮。其中一个是多余的。你想要哪一个？