反应不改变本地状态下拉值

Question

我正在构建一个 PO # 输入系统来输入 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 状态变量在状态中正确更改，但是当我 select a priority 时，它会创建一个新的状态值标记为 : 而不是更新 priority 值。

这可能很简单，但我已经无计可施了。求助！

Answer 1

您的优先级 select 缺少 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>

反应不改变本地状态下拉值

React not changing local state dropdown value

state

jsx

reactjs

dropdown