Блог

Главная - Вопросы по программированию - Текстовое поле пользовательского интерфейса материала недоступно для редактирования в React

Текстовое поле пользовательского интерфейса материала недоступно для редактирования в React

#reactjs

Вопрос:

Текстовое поле не работает, я хочу увеличивать и уменьшать значение текстового поля при увеличении и уменьшении, И когда я нажимаю кнопку AddToCart, я хочу, чтобы это входное значение текстового поля также вместе с кнопкой addtocart элементов(объектов)

value и defualtValue реквизит не работает

 <Button  onClick={() => decrement(items.id)}>Decrement</Button>
<TextField value={items.quantity}/> 
<Button  onClick={() => decrement(items.id)}>Increment</Button>

<Button  onClick={() => addTocart(items)}>Add to cart</Button>

у предметов есть предмет { id: 4, productname: 'Grapes', price: 100, quantity: 1 } 

 const addToCart = (newItem) => {
   want input value and  item object
}

Комментарии:

1. Пожалуйста, объявите переменную «элементы» в качестве переменной состояния. Поэтому, когда «элементы» изменены, используйте функцию setItems.

2. Объявите переменную items состояния с помощью useState крючка или переменной класса.

3. Что и было items заявлено? Можете ли вы поделиться более подробным примером кода?

4. const allProducts=[ { id:1, имя_продукта:’Яблоко’,цена:100,количество:1} { id:2, имя_продукта:’Вишня’,цена:70,количество:1} { id:3, имя_продукта:’Апельсин’,цена:60,количество:1} { id:4, имя_продукта:’Виноград’, цена:69,количество:1} ] const [штат, отправка] = Пользователь (редуктор, все продукты) { state.map(товар=>(

5. Можете ли вы поделиться своей reducer функцией и создателями increment и decrement действиями? Значение текстового поля будет обновляться до тех пор, пока вы правильно обновляете состояние. Можете ли вы уточнить, что вы хотите, когда нажмете кнопку «добавить в корзину»? Ваш вопрос касается увеличения/уменьшения количества элементов или добавления нового элемента в ваше состояние? Можете ли вы «провести» нас через свой пользовательский интерфейс/UX и что должно произойти, когда и по какой причине?

Ответ №1:

Пожалуйста, используйте этот код.

 const [items, setItems] = React.useState({id:4, productname:'Grapes', price:100, quantity:1});

...

<Button  onClick={()=>setItems({...items, quantity: items.quantity - 1})} > Decrement</Button>
<TextField value={items.quantity}/> 
<Button  onClick={()=>setItems({...items, quantity: items.quantity   1})} > Increment</Button>
Метки: