динамически установить выбор входного значения

Question

в приложении для грузовиков, которое я создаю, у меня есть компонент карты заказа. В этом компоненте карты заказа отображаются все элементы, которые пользователь имеет в своем заказе, а также количество каждого элемента. Там, где отображается счетчик каждого элемента, я хочу изменить его для отображения входных данных выбора, где значение выбора по умолчанию будет равно количеству, которое пользователь уже выбрал. Затем я хочу, чтобы пользователь мог изменять счет с помощью ввода select.

Вот снимок экрана компонента в пользовательском интерфейсе:

Что Я хочу изменить выбор входа является счетчиком слева от каждого элемента в порядке. Например, первый пункт в этом заказе - куриные тако. Счетчик равен 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);

Googling было очень трудно найти примеры этого. Пожалуйста, дайте мне знать, если вам нужно больше контекста / информации и заранее спасибо за вашу помощь.

ОБНОВЛЕНИЕ:

Для тех, кто спрашивает, почему выборочный, а не обычный ввод, я просто копирую этот дизайн из того, что есть на 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);

Я предполагаю, что вы знаете возможные опции для выбора, иначе вам действительно следует использовать тип ввода = 'число' с мин / макс. значение при необходимости.

[Редактировать]: Я добавил опцию удаления, которую вы хотели, хотя selectedValue выбора. Принцип тот же с кнопкой. Я также предположил, что у вас есть состояние с вашим заказом внутри.

Answer 2

Это базовая c идея о том, что вы пытаетесь сделать? Я могу добавить немного больше подробностей, если это поможет.
(он выбирает опцию из списка, используя свой индекс, поэтому вам может понадобиться сначала использовать метод 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)