我有一個關于如何在用戶單擊提交 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;
 

uj5u.com熱心網友回復：

You can put the default value in your state instead of an empty string. That way if anyone submits the form then the value of input will be back to its `default' value.

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

uj5u.com熱心網友回復：

First you would need to add the default empty option in the <select>

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

And then you need to clear it normally

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

uj5u.com熱心網友回復：

Initialize it with a value like this,

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>

Note: As others mentioned, you can also initialize it with a empty string, but make sure you update it everywhere.

標籤：javascript 反应 选择 下拉式菜单 html-选择

上一篇：ReacttoDoApp洗掉任務功能不起作用

下一篇：將多點線（坐標陣列）分割成線段陣列的演算法