Значения в input не изменяется (react redux)
Сделал инпут с value redux-react
и на onChange
изменение, но в state
не изменяется value
.
<input type="number" className="p-1 border-[2px] border-[#CCCCCC] rounded-md" onChange={(e) => props.setQuantityStickers(e.target.value)} value={props.builder.stickers.quantity}/>
Вот redux
:
setQuantityStickers: (data) => {
const action = {
type: 'QUANTITY_STICKERS',
data: data
}
dispatch(action)
}
Вот в reducer state
и изменение:
case QUANTITY_STICKERS:
return{
...state,
...state.stickers,
quantity: action.data
}
stickers: {
diameter: [
{
active: true,
count: 40
},{
active: false,
count: 50
},{
active: false,
count: 60
},{
active: false,
count: 90
},{
active: false,
count: 110
},{
active: false,
count: 140
}
],
quantity: 1,
sample: [
{
active: true,
name: 'Нет, не нужно'
},{
active: false,
name: 'Да, из нашего каталога'
},{
active: false,
name: 'Есть свой логотип/макет'
}
],
text: ''
}
Родитель
const Builder = (props) => {
return (
<div id="builder" className={`${container_style} py-[130px]`}>
<div className='w-full flex justify-between items-center'>
<MenuBuilder props={props} />
</div>
<div className='w-full flex flex-col'>
<BuilderArea props={props}/>
</div>
</div>
)
}
function mapStatesToProps(state) {
return {
state
}
}
function mapDispatchToProps(dispatch) {
return {
setSizeXY: () => {
const action = {
type: 'SET_SIZE/XY',
}
dispatch(action)
},
selectMenu: (data) => {
const action = {
type: 'SELECT_MENU',
data: data
}
dispatch(action)
},
selectDiameterStickers: (data) => {
const action = {
type: 'DIAMETER_STICKERS',
data: data
}
dispatch(action)
},
setQuantityStickers: (data) => {
const action = {
type: 'QUANTITY_STICKERS',
data: data
}
dispatch(action)
}
}
}
export default connect(mapStatesToProps, mapDispatchToProps)(Builder)
index файл:
const store = createStore(rootReducer)
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Provider store={store}>
<App />
</Provider>
);
App файл:
function App(props) {
if(props.cart.openCart === true || props.header.openBurger === true){
document.body.classList.add('noscroll')
}else {
document.body.classList.remove('noscroll')
}
return (
<div className={`w-full`}>
<Header />
<Cart />
<Home />
<Why />
<Builder />
</div>
);
}
function mapStatesToProps(state) {
return {
state
}
}
export default connect(mapStatesToProps)(App)
BuilderArea:
import RadioBuilder from './components/radio'
const BuilderArea = ({props}) => {
function renderMounted(){
return (
<>
</>
)
}
function renderListDiameterStickers(){
const diameter = props.builder.stickers.diameter
return (
<>
{
diameter.map((el, index) => (
<div onClick={() => props.selectDiameterStickers(index)} key={index} className="flex font-regular text-[18px] text-[#333333] items-center cursor-pointer gap-[5px]">
<RadioBuilder active={el.active} />
{
el.count
}
</div>
))
}
</>
)
}
function renderStickers(){
return (
<div className="max-w-max text-[#777777]">
<div className="text-[22px] font-semibold">
Наклейки
</div>
<div className="mt-[20px]">
<p className="text-[16px] font-semibold">
Диаметер наклейки, мм. <span className="text-[#B14442] font-bold">*</span>
</p>
<div className="mt-[5px] flex flex-col gap-[5px]">
{
renderListDiameterStickers()
}
</div>
</div>
<div className="mt-[20px]">
<p className="text-[16px] font-semibold">
Количество, шт. <span className="text-[#B14442] font-bold">*</span>
</p>
<input type="number" className="p-1 border-[2px] border-[#CCCCCC] rounded-md" onChange={(e) => props.setQuantityStickers(e.target.value)} value={props.builder.stickers.quantity}/>
</div>
</div>
)
}
function renderArea(){
return (
<>
</>
)
}
function renderChoose(){
return (
<div className='w-full flex text-[20px] text-[#757575] font-bold justify-center items-center py-10'>
Выберите, что вам нужно. Для этого Вам поможет меню.
</div>
)
}
function renderAll(){
if(props.builder.menu_way1 !== null){
if(props.builder.menu_way3 !== null){
return renderArea()
}else if(props.builder.menu_way1 !== null){
switch(props.builder.menu_way1){
case 'mounted':
return renderMounted()
case 'stickers':
return renderStickers()
default:
return renderChoose()
}
}else{
return renderChoose()
}
}
return renderChoose()
}
return (
<>
{
renderAll()
}
</>
)
}
export default BuilderArea
скриншот того, что данные приходят(в консоли видно)
скриншот props.builder
Функция изменения
case QUANTITY_STICKERS:
return{
...state,
...state.stickers,
quantity: action.data
}