reactjs - 如何在状态重置后将下拉选择器重置为其默认值？当我使用下面的事件处理程序时，它不会恢复

Question

------------------form jsx--------------

<label htmlFor = 'size'>
    What size pizza would you like?
    <br/>
    <select name = 'size' id = 'sizeinput' onChange = {inputChange}>
        <option value={null}disabled selected>Select</option>
        <option value='Sm'>Sm</option>
        <option value='Lg'>Lg</option>
        <option value='XL'>XL</option>
    </select>
</label>

------------------------------------表单提交------------------------ ---

const formSubmit = e => {
    e.preventDefault();
    axios
    .post("https://reqres.in/api/users", formState)
    .then(res => {
        setPost(res.data);
        console.log("success", post);
        setFormState({
            size: ""
        });
    })
    .catch(err => console.log(err.response));
};

Answer 1

默认值是通过使用valueprop for设置的，请参阅此处select的文档。

因此，您应该将formState.size与value道具绑定。这样，您可以初始化它，null以便在安装null时默认选择它，然后在完成后将其重置回。

    <select value={formState.size} name='size' id='sizeinput' onChange={inputChange}>
        <option value={null} disabled>Select</option>
        <option value='Sm'>Sm</option>
        <option value='Lg'>Lg</option>
        <option value='XL'>XL</option>
    </select>

Answer 2

您还必须在选择输入中提供 value 属性。

import React, { useState } from 'react';
import axios from 'axios';

const Dashboard = () => {
  const [formState, setFormState] = useState({ size: '' });
  const [post, setPost] = useState({});

  const inputChange = (e) => {
    setFormState({
      size: e.target.value,
    });
  };

  const onFormSubmit = (e) => {
    e.preventDefault();
    axios
      .post('https://reqres.in/api/users', formState)
      .then((res) => {
        setPost(res.data);
        setFormState({ size: '' });
      })
      .catch((err) => console.log(err.response));
  };

  console.log(post);
  return (
    <form onSubmit={onFormSubmit}>
      <label htmlFor="size">
        What size pizza would you like?
        <br />
        <select value={formState.size} name="size" id="sizeinput" onChange={inputChange}>
          <option value="" disabled selected>Select</option>
          <option value="Sm">Sm</option>
          <option value="Lg">Lg</option>
          <option value="XL">XL</option>
        </select>
      </label>
      <button type="submit">Submit</button>
    </form>
  );
};

export default Dashboard;

这是你犯错的地方

<select name = 'size' id = 'sizeinput' onChange = {inputChange}> 

至

<select value={formState.size} name="size" id="sizeinput" onChange={inputChange}>