React：提交后将选择输入设置回默认值

Question

我有一个关于如何在用户单击提交 btn 后将选择输入设置回默认值的 React.js 问题。

在我的表单中，有几个输入，我可以将输入设置回为空，显示除和标记之外的每个占位符。 当用户点击一个提交按钮时，它会调用一个handleSubmit 函数，并通过在handleSubmit 函数结束时调用setValues() 函数，除输入之外的所有输入值都消失了。

我想将其设置为“选择一个类别”。

这是我的代码和相关功能。 提前感谢您的评论和宝贵的时间。

表单输入选择.jsx

import React from 'react';

const FormInputSelect = props => {
  const { label, onChange, id, ...inputProps } = props;
  return (
    <div className='quizFormInputSelect'>
      <label>{label}</label>
      <select name={label} id={label} onChange={onChange} defaultValue="">
        <option value="default" disabled>Select a category</option>
        <option value="Workout">Workout</option>
        <option value="Muscle">Muscle</option>
        <option value="Nutrition">Nutrition</option>
        <option value="Other">Other</option>
      </select>
    </div>
  );
};

export default FormInputSelect;

新测验.jsx

import { useState } from 'react';
import { collection, setDoc, doc, addDoc } from 'firebase/firestore';

import FormInputText from './FormInputText';
import FormInputSelect from './FormInputSelect';
import db from '../firebaseConfig';

const NewQuiz = () => {
  const [values, setValues] = useState({
    question: '',
    answer1: '',
    answer2: '',
    answer3: '',
    answer4: '',
    correctAnswer: 0,
    createdAt: '',
    category: ""
  });

  const inputs = [
    {
      id: 1,
      name: 'question',
      type: 'text',
      placeholder: 'Is protein powder white happy magical snow??',
      label: 'Question',
    },
    {
      id: 2,
      name: 'answer1',
      type: 'text',
      placeholder: 'No',
      label: 'Answer 1',
    },
    {
      id: 3,
      name: 'answer2',
      type: 'text',
      placeholder: 'Yes',
      label: 'Answer 2',
    },
    {
      id: 4,
      name: 'answer3',
      type: 'text',
      placeholder: 'Maybe',
      label: 'Answer 3',
    },
    {
      id: 5,
      name: 'answer4',
      type: 'text',
      placeholder: 'Tqm',
      label: 'Answer 4',
    },
    {
      id: 6,
      name: 'correctAnswer',
      type: 'number',
      placeholder: 1,
      label: 'Correct Answer',
    },
    {
      id: 7,
      name: 'category',
      label: 'Category',
    },
  ];

  const onChange = e => {
    setValues({ ...values, [e.target.name]: e.target.value });
  };

  const handleSubmit = async e => {
    // const quizRef = doc(db, 'quizzes', 'category');
    // await setDoc(quizRef, payload);
    e.preventDefault();
    const quizCollectionRef = collection(db, 'quizzes');
    const payload = {
      question: values['question'],
      answers: [
        values['answer1'],
        values['answer2'],
        values['answer3'],
        values['answer4'],
      ],
      correctAnswer: parseInt(values['correctAnswer']),
      likes: 0,
      createdAt: new Date(),
      category: values['category']
    };
    await addDoc(quizCollectionRef, payload);

    setValues({
      question: '',
      answer1: '',
      answer2: '',
      answer3: '',
      answer4: '',
      correctAnswer: 0,
      createdAt: '',
      category: "Select a category" // how to set it to default value
    })
  };

  console.log(values);

  return (
    <form action='' className='quizForm' onSubmit={handleSubmit}>
      {inputs.map((input, i) => {
        if (input["type"] === "text" || input["type"] === "number") {
          return (
            <FormInputText
              key={input.id}
              {...input}
              value={values[input.name]}
              onChange={onChange}
            />
          )
        } else {
          return (
            <FormInputSelect
              key={input.id}
              {...input}
              value={values[input.name]}
              onChange={onChange}
            />
          )
        }
      })}
      <button>Submit</button>
    </form>
  );
};

export default NewQuiz;
 

Answer 1

您可以将default 值放在state 中，而不是空的string。这样，如果有人提交了form，那么input 的值将回到它的“默认”值。

const [values, setValues] = useState({
  category: "Select a category"
});

Answer 2

首先，您需要在 <select> 中添加默认的空选项

<option value="">Select a category</option>

然后你需要正常清除它

setValues({
  // ...
  category: ""
})

Answer 3

用这样的值初始化它，

const [values, setValues] = useState({
    question: '',
    answer1: '',
    answer2: '',
    answer3: '',
    answer4: '',
    correctAnswer: 0,
    createdAt: '',
    category: "default"
  });

 setValues({
      question: '',
      answer1: '',
      answer2: '',
      answer3: '',
      answer4: '',
      correctAnswer: 0,
      createdAt: '',
      category: "default" // Match it with value="____" in select
    })

<select name={label} id={label} onChange={onChange} value={value}>
        <option value="default" disabled>Select a category</option>
        <option value="Workout">Workout</option>
        <option value="Muscle">Muscle</option>
        <option value="Nutrition">Nutrition</option>
        <option value="Other">Other</option>
</select>

笔记：正如其他人提到的，您也可以使用空字符串对其进行初始化，但请确保在任何地方都对其进行更新。

Answer 4

我在那里解决了你的问题：https://codesandbox.io/s/select-4qzimx?file=/src/FormInputSelect.jsx

请更改您的代码：

const NewQuiz = () => {
  const [values, setValues] = useState({
    question: "",
    answer1: "",
    answer2: "",
    answer3: "",
    answer4: "",
    correctAnswer: 0,
    createdAt: "",
    category: ""
  });

...

setValues({
      question: "",
      answer1: "",
      answer2: "",
      answer3: "",
      answer4: "",
      correctAnswer: 0,
      createdAt: "",
      category: "" 
    });
  };

……

const FormInputSelect = (props) => {
  const { label, value, onChange, id, ...inputProps } = props;
  return (
    <div className="quizFormInputSelect">
      <label>{label}</label>
      <select
        name={label}
        id={label}
        value={value}
        onChange={onChange}
        defaultValue={""}
        {...inputProps}
      >
        <option value="" disabled>
          Select a category
        </option>
        <option value="Workout">Workout</option>
        <option value="Muscle">Muscle</option>
        <option value="Nutrition">Nutrition</option>
        <option value="Other">Other</option>
      </select>
    </div>
  );
};