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

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

1 голос
/ 24 апреля 2020

Я строю систему ввода PO # для ввода номера PO, даты выполнения и приоритета. И номер заказа на поставку, и срок оплаты меняются, как и должно быть, но приоритет не меняется.

Вот код компонента: 

import React, { useState, useContext, useEffect } from 'react';
import M from 'materialize-css';
import OrderContext from '../../context/order/orderContext';
import AlertContext from '../../context/alert/alertContext';

const POEntry = () => {
  const orderContext = useContext(OrderContext);
  const alertContext = useContext(AlertContext);
  const { submitPO } = orderContext;
  const { setAlert } = alertContext;

  const [newOrder, setNewOrder] = useState({
    poNum: '',
    dueDate: '',
    priority: '',
  });

  const { poNum, dueDate, priority } = newOrder;

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

  const onSubmit = (e) => {
    e.preventDefault();
    if (poNum === '') {
      setAlert('Please fill in all fields', 'danger');
    } else {
      console.log(poNum);
      console.log(dueDate);
      submitPO({
        poNum,
        dueDate,
        priority,
      });
    }
  };

  useEffect(() => {
    M.AutoInit();
    // eslint-disable-next-line
  }, []);

  return (
    <div className="row">
      <form className="col s12" onSubmit={onSubmit}>
        <div className="row">
          <div className="col s12">
            <div className="input-field col s4">
              <i className="fas fa-archive prefix"></i>
              <label htmlFor="poNum">Enter PO Number...</label>
              <input
                id="poNum"
                name="poNum"
                type="text"
                value={poNum}
                onChange={onChange}
              />
            </div>
            <div className="input-field col s4">
              <i className="fas fa-calendar-day prefix"></i>
              <input
                id="dueDate"
                name="dueDate"
                type="date"
                value={dueDate}
                onChange={onChange}
              />
            </div>
            <div class="input-field col s4">
              <select value={priority} onChange={onChange}>
                <option value="low">Low Priority</option>
                <option value="norm">Normal Priority</option>
                <option value="high">High Priority</option>
              </select>
              <label>Priority Level</label>
            </div>
          </div>
        </div>
        <div className="col s12">
          <button className="btn btn-primary btn-block">Submit PO</button>
        </div>
      </form>
    </div>
  );
};

export default POEntry;

Чтобы повторить, poNum и dueDate переменные состояния меняются в состоянии должным образом, но когда я выбираю priority, вместо обновления значения priority создается новое значение состояния, помеченное :.

Возможно, это что-то простое, но я в своем уме остроумия здесь. Помощь!

1 Ответ

2 голосов
/ 24 апреля 2020

Вам не хватает атрибута name для выбора приоритета.

Вам необходимо сделать: 

<select value={priority} onChange={onChange} name="priority">
    <option value="low">Low Priority</option>
    <option value="norm">Normal Priority</option>
    <option value="high">High Priority</option>
</select>
...