Как сбросить выпадающий селектор на значение по умолчанию после сброса состояния? Когда я использую обработчик событий ниже, он не возвращается - PullRequest
Новая
       27

Как сбросить выпадающий селектор на значение по умолчанию после сброса состояния? Когда я использую обработчик событий ниже, он не возвращается

0 голосов
/ 27 марта 2020

------------------ форма 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));
};

Ответы [ 2 ]

0 голосов
/ 27 марта 2020

Вы также должны указать атрибут значения в выбранном входе. 

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}>

To 

<select value={formState.size} name="size" id="sizeinput" onChange={inputChange}>
0 голосов
/ 27 марта 2020

Значение по умолчанию устанавливается с помощью value prop для 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>
...