动态设置选择输入值

Question

在我正在构建的食品卡车应用程序中，我有一个订单卡组件。在该订单卡组件上，它显示了用户订单中的所有商品以及每个商品的数量。在显示每个项目的计数的位置，我想更改它以呈现选择输入，其中选择的默认值将是用户已经选择的任何计数。然后我希望用户能够使用选择输入来更改计数。

这是 UI 中组件的屏幕截图：

我要更改为选择输入的是顺序中每个项目左侧的计数。例如，此订单中的第一项是鸡肉炸玉米饼。计数为 2。我希望将其中的选择输入动态设置为 2，但如果用户愿意，则可以按顺序增加或减少鸡肉玉米卷的数量。

这是组件中的代码：

const OrderCard = props => {
    const orderCount = props.order.reduce(function(prev, cur) {
        return prev + cur.count;
    }, 0);

    return (
        <Card className="order-card-main">
            <i class="far fa-times-circle" style={{ position: 'relative', left: '0px', textAlign: 'left', width: '100%', marginTop: '3%', fontSize: '1.5rem' }} onClick={() => props.closeOrderCard()}></i>

            <h1 className="order-card-title">Your Order</h1>
            <p className="order-card-truck">from <span className="truck-name">{props.selectedTruck.name}</span></p>

            <div className="order-items-cont">
                {props.order.map(item => (
                    <div className="order-item-div">
                        <p className="order-item-count">{item.count}</p>
                        <p className="order-item-name">{item.item}</p>
                        <p className="order-item-total">{CurrencyFormatter.format(item.total, { currency: 'USD' })}</p>
                        <hr />
                    </div>
                ))}
            </div>

            <input className="order-note-input" type="text" placeholder="Note to truck..." />

            <button className="pay-button">
                <p className="total-items-count">{orderCount}</p>
                <p>Next step: pay</p>
                <p>{
                CurrencyFormatter.format(props.order.reduce(function(prev, cur) {
                    return prev + cur.total;
                }, 0), { currency: 'USD' })
                }</p>
            </button>
        </Card>
    )
}

const mapStateToProps = state => {
    return {
        selectedTruck: state.selectedTruck,
        order: state.order
    }
}

export default connect(mapStateToProps, { closeOrderCard })(OrderCard);

通过谷歌搜索很难找到这方面的例子。如果您需要更多上下文/信息，请告诉我，并提前感谢您的帮助。

更新：

对于那些询问为什么选择而不是常规输入的人，我只是从 Uber Eats 上复制这个设计。我可能会使用建议的想法，但我仍然想知道如何使用选择输入来做到这一点。这是来自 Uber Eats 的订单组件的屏幕截图：

Answer 1

这里是你的代码修改了一个选择：

const OrderCard = (props) => {
  const [state, setState] = useState(props.order);

  const orderCount = props.order.reduce(function (prev, cur) {
    return prev + cur.count;
  }, 0);

  const displayOptions = (count) => {
    const options = [0, 1, 2, 3, 4, 5];

    return options.map((option) => (
      <option value={option} selected={option === count}>
        {option}
      </option>
    ));
  };

  const onSelectValueChange = (item) => {
    const selectedValue = document.getElementById('mySelect').value;
    // Do whatever you need with the value
    if(selectedValue === 0) {
      const newOrder = Object.assign({}, state); // better use deepclone() from lodash if you can
      for(let i = 0; i < newOrder.length; i++){
        const item = newOrder[i];

        if(item.id === item.id){
          newOrder.splice(i, 1);
          setState({...state, order: newOrder});
        }
      }
    }
  }

  return (
    <Card className='order-card-main'>
      <i
        class='far fa-times-circle'
        style={{
          position: 'relative',
          left: '0px',
          textAlign: 'left',
          width: '100%',
          marginTop: '3%',
          fontSize: '1.5rem',
        }}
        onClick={() => props.closeOrderCard()}
      ></i>

      <h1 className='order-card-title'>Your Order</h1>
      <p className='order-card-truck'>
        from <span className='truck-name'>{props.selectedTruck.name}</span>
      </p>

      <div className='order-items-cont'>
        {props.order.map((item) => (
          <div className='order-item-div'>
            <p className='order-item-count'>
              <select id='mySelect' onChange={() => onSelectValueChange(item)}>
                {displayOptions(item.count)}
              </select>
            </p>
            <p className='order-item-name'>{item.item}</p>
            <p className='order-item-total'>
              {CurrencyFormatter.format(item.total, { currency: 'USD' })}
            </p>
            <hr />
          </div>
        ))}
      </div>

      <input
        className='order-note-input'
        type='text'
        placeholder='Note to truck...'
      />

      <button className='pay-button'>
        <p className='total-items-count'>{orderCount}</p>
        <p>Next step: pay</p>
        <p>
          {CurrencyFormatter.format(
            props.order.reduce(function (prev, cur) {
              return prev + cur.total;
            }, 0),
            { currency: 'USD' }
          )}
        </p>
      </button>
    </Card>
  );
};

const mapStateToProps = (state) => {
  return {
    selectedTruck: state.selectedTruck,
    order: state.order,
  };
};

export default connect(mapStateToProps, { closeOrderCard })(OrderCard);

我假设您知道可以放入选择中的选项，否则您确实应该在需要时使用带有最小值/最大值的 input type='number'。

[编辑]：我通过选择的 selectedValue 添加了您想要的删除选项。原理与按钮相同。 我还假设你有一个状态，里面有你的订单。

Answer 2

这是您尝试做的基本想法吗？如果有帮助，我可以添加更多细节。
（它使用其索引从列表中选择一个选项，因此您可能需要先使用indexOf 方法。）

const select = document.getElementById("select");
select.selectedIndex = 1;

<select id="select">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

（参考：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select）