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

Posted 2023-02-22

【中文标题】反应不改变本地状态下拉值

【英文标题】：React not changing local state dropdown value

【发布时间】：2020-08-08 11:18:48

【问题描述】：

我正在构建一个 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 状态变量会在状态中正确更改，但是当我选择 priority 时，它会创建一个标记为 : 的新状态值，而不是更新 priority 值.

这可能很容易，但我到此为止。救命！

【参考方案1】：

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