Сброс тега выбора после отправки

Я хочу сбросить тип выбора после нажатия кнопки отправки:

const types = ['text', 'color', 'date', 'email', 'tel', 'number'];

onSelect = ({ target }) => {
    const value = target.value;
    this.setState(curr => ({
      tempInput: { ...curr.tempInput, inputType: value }
    }));
};


<select onChange = {this.onSelect} required>
    <option value=''>
        Please select a type
    </option>
    {types.map(type => (
        <option key = {type} value = {type}>
            {type}
        </option>
     ))}
</select>

это означает, что у меня будет кнопка «отправить», когда я нажму на нее, я сброслю состояние, и я хочу, чтобы выбранный тег снова изменился на «Пожалуйста, выберите тип», но я понятия не имею, как это сделать, был бы признателен за помощь, Благодарность!

reactjs select

16.02.2019 15:51

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы можете использовать что-то вроде этого:

 const types = ['text', 'color', 'date', 'email', 'tel', 'number'];



onSelect = ({ target }) => {
    const value = target.value;
    this.setState(curr => ({
      tempInput: { ...curr.tempInput, inputType: value }
    }));
};

onSubmit = () => {
    // Do some submit logic
    this.setState(curr => ({
        tempInput: { ...curr.tempInput, inputType: '' }
    })
}


<select onChange = {this.onSelect} required>
    <option value='' selected = {!this.state.tempInput.inputType}>
        Please select a type
    </option>
    {types.map(type => (
        <option key = {type} value = {type} selected = {this.state.tempInput.inputType === type}>
            {type}
        </option>
    ))}
</select>

устанавливать undefined вручную - плохая практика, пожалуйста, не делайте этого

— 16.02.2019 16:13

16.02.2019 16:03

Ответ принят как подходящий

У вас может быть дополнительная переменная состояния, которая управляет текущим выбранным value из select и сбрасывает его на ''.

Пример

class App extends React.Component {
  state = {
    types: ["text", "color", "date", "email", "tel", "number"],
    selectedType: ""
  };

  onSelect = event => {
    this.setState({
      selectedType: event.target.value
    });
  };

  onReset = () => {
    this.setState({ selectedType: "" });
  };

  render() {
    const { types, selectedType } = this.state;

    return (
      <div>
        <select onChange = {this.onSelect} required value = {selectedType}>
          <option value = "">Please select a type</option>
          {types.map(type => (
            <option key = {type} value = {type}>
              {type}
            </option>
          ))}
        </select>
        <button onClick = {this.onReset}>Reset</button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id = "root"></div>

16.02.2019 16:07

Другие вопросы по теме

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

Mysql Выберите максимальное количество последовательных записей (с пробелами)

Возьмите правую строку после ^

Как превратить результаты столбцов в заголовки столбцов в SQL?

Получить результат для отсутствующих данных

Почему я получаю сообщение ORA-00979 при попытке использовать LISTAGG и LEFT JOIN?

Как очистить поле выбора старых данных и заполнить новыми данными при выборе Javascript?

Новый созданный пользователь базы данных SQL Azure со схемой dbo, но не может искать таблицы в схеме dbo

Тег <select> не сохраняет цвет фона на iphone

Попытка поместить перечисление в вспомогательный класс формы выбора в рельсах 5

Сброс тега выбора после отправки

Ответы 2

Другие вопросы по теме

Похожие вопросы