Question

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

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

我要更改为选择输入的是订单中每个项目左侧的计数。例如，此顺序中的第一项是炸玉米饼。计数为2。我希望将select输入动态地设置为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);

我假设您知道可以放入选择项的选项，否则，如果需要，您确实应该使用输入类型=“数字”以及最小值/最大值。

[编辑] ：我通过select的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）

动态设置选择输入值

2 个答案: