反应所需的输入

问题描述

我正在尝试在表单中要求提供姓名和电子邮件。我最初是将<button>嵌套在<Link>内，并发现<button>本身就可以工作以允许需要输入，但是当它嵌套在<Link>内时不需要它。然后，我将链接添加到submitSurvey函数中，并将<Link>从渲染中移除。它仍然不需要输入。 这是我的NameEmailComponent.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>
    </>
  );
};

这是我的NameInput.js：

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>
    </>
  );
};

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）