0

Ситуация такая. Есть 2 инпута(рост 3 пункта и размер 5 пунктов), при выборе роста и размера и при нажатии кнопки нас переносит на пдф файл(который соответствует выбранным росту и размеру). все работает, но если, например, установить checked на рост, а потом выбирать только размер переход не осуществляется(console.log не появляется тоже). И если мы уже сделали переход, возвратились назад, потом выбрали другой размер, а рост не трогали, так же не осуществляется переход. Нужно еще раз кликнуть по росту. Пробовал на 1 росте и 2х размерах, остальные закоментил. window.location.assign работает так же. Не ругайте слишком, как смог реализовал, первый опыт).

const PatternsUl = () => {
    
  
    const [data, setData] = React.useState({
        value1: '160height',
        value2: '165height',
        value3: '170height',
        selectedRadioInput: '' 
      });
      const [data1, setData1] = React.useState({
        value1: '40',
        value2: '42',
        value3: '44',
        value4: '46',
        value5: '48',
        selectedRadioInput1: '' 
      });

    function handleClick(e) {
        e.preventDefault(isDisabled)
        let height = data.selectedRadioInput;
        let size = data1.selectedRadioInput1;
       if(height === '160height' && size === '40'){
        console.log(height, size)
        window.location.href='https://drive.google.com/file/d/1yBKwwwENnz6PZpYM73-99EwYdJSueokK/view?usp=sharing';
       }if(height === '160height' && size === '42'){
        console.log(height, size)
        
        window.location.href='https://drive.google.com/file/d/1Yv1oZeuxQ4yMylasQtn6Q2LeEd9JIN5c/view?usp=sharing';
       }if(height === '160height' && size === '44'){
        console.log(height, size)
        
        //window.location.assign('https://drive.google.com/file/d/1Yv1oZeuxQ4yMylasQtn6Q2LeEd9JIN5c/view?usp=sharing');
       }if(height === '160height' && size === '46'){
        console.log(height, size)
        
        //window.location.assign('https://drive.google.com/file/d/1Yv1oZeuxQ4yMylasQtn6Q2LeEd9JIN5c/view?usp=sharing');
       }if(height === '160height' && size === '48'){
        console.log(height, size)
        
        //window.location.assign('https://drive.google.com/file/d/1Yv1oZeuxQ4yMylasQtn6Q2LeEd9JIN5c/view?usp=sharing');
       }if(height === '165height' && size === '40'){
        console.log(height, size)
        
        //window.location.assign('https://drive.google.com/file/d/1Yv1oZeuxQ4yMylasQtn6Q2LeEd9JIN5c/view?usp=sharing');
       }if(height === '165height' && size === '42'){
        console.log(height, size)
        
        //window.location.assign('https://drive.google.com/file/d/1Yv1oZeuxQ4yMylasQtn6Q2LeEd9JIN5c/view?usp=sharing');
       }if(height === '165height' && size === '44'){
        console.log(height, size)
        
        //window.location.assign('https://drive.google.com/file/d/1Yv1oZeuxQ4yMylasQtn6Q2LeEd9JIN5c/view?usp=sharing');
       }if(height === '165height' && size === '46'){
        console.log(height, size)
        
        //window.location.assign('https://drive.google.com/file/d/1Yv1oZeuxQ4yMylasQtn6Q2LeEd9JIN5c/view?usp=sharing');
       }if(height === '165height' && size === '48'){
        console.log(height, size)
        
        //window.location.assign('https://drive.google.com/file/d/1Yv1oZeuxQ4yMylasQtn6Q2LeEd9JIN5c/view?usp=sharing');
       }if(height === '170height' && size === '40'){
        console.log(height, size)
        
        //window.location.assign('https://drive.google.com/file/d/1Yv1oZeuxQ4yMylasQtn6Q2LeEd9JIN5c/view?usp=sharing');
       }if(height === '170height' && size === '42'){
        console.log(height, size)
        
        //window.location.assign('https://drive.google.com/file/d/1Yv1oZeuxQ4yMylasQtn6Q2LeEd9JIN5c/view?usp=sharing');
       }if(height === '170height' && size === '44'){
        console.log(height, size)
        
        //window.location.assign('https://drive.google.com/file/d/1Yv1oZeuxQ4yMylasQtn6Q2LeEd9JIN5c/view?usp=sharing');
       }if(height === '170height' && size === '46'){
        console.log(height, size)
        
        //window.location.assign('https://drive.google.com/file/d/1Yv1oZeuxQ4yMylasQtn6Q2LeEd9JIN5c/view?usp=sharing');
       }if(height === '170height' && size === '48'){
        console.log(height, size)
        
        //window.location.assign('https://drive.google.com/file/d/1Yv1oZeuxQ4yMylasQtn6Q2LeEd9JIN5c/view?usp=sharing');
       }
        

        
       
      }

    function showInputHeight(e){
        
        //console.log(e.target.value)
        setData({ ...data, selectedRadioInput: e.target.value });
    }

    function showInputSize(e){
        //console.log(e.target.value)
        setData1({ ...data1, selectedRadioInput1: e.target.value });
    }
  
    return(
        <div className="selectlink"> 
            <fieldset className="patternsUlHeight">
                <legend>Рост:</legend>
                <div>
                    <input 
                    type="radio" 
                    id="inRadioHeight1" 
                    name="height" 
                    value={data.value1} 
                    checked={data}
                    onChange={showInputHeight}
                    />
                    <label >160</label>
                </div>
                <div>
                    <input 
                    type="radio" 
                    id="inRadioHeight2" 
                    name="height" 
                    value={data.value2} 
                    onChange={showInputHeight}
                    />
                    <label >165</label>
                </div>
                <div>
                    <input 
                    type="radio" 
                    id="inRadioHeight3" 
                    name="height" 
                    value={data.value3} 
                    onChange={showInputHeight}
                    />
                    <label >170</label>
                </div>
            </fieldset>
            <fieldset className="patternsUlSize">
                <legend>Размер:</legend>
                <div>
                    <input 
                    type="radio" 
                    id="inRadioSize" 
                    name="size" 
                    value={data1.value1}  
                    onChange={showInputSize} />
                    <label >40</label>
                </div>
                <div>
                    <input 
                    type="radio" 
                    id="inRadioSize" 
                    name="size" 
                    value={data1.value2}  
                    onChange={showInputSize} />
                    <label >42</label>
                </div>
                <div>
                    <input 
                    type="radio" 
                    id="inRadioSize" 
                    name="size" 
                    value={data1.value3}  
                    onChange={showInputSize} />
                    <label >44</label>
                </div>
                <div>
                    <input 
                    type="radio" 
                    id="inRadioSize" 
                    name="size" 
                    value={data1.value4} 
                    onChange={showInputSize} />
                    <label>46</label>
                </div>
                <div>
                    <input 
                    type="radio" 
                    id="louie" 
                    name="size" 
                    value={data1.value5} 
                    onChange={showInputSize}
                    />
                    <label>48</label>
                </div>
            </fieldset>
            <button 
            id="buttonPattern" 
            type="button" 
            onClick={handleClick}
            >button</button>
        </div>
    )
}

export default PatternsUl;
4
  • А Вы в браузер смотрели у вас, написано e.preventDefault(isDisabled) и на isDisabled скрипт падает так как нет такой переменной, вообще запись странная, я таких раньше не встречал preventDefault не требует параметров, уточните откуда у Вас информация что так нужно писать? Commented 1 апр. 2023 в 7:38
  • дизабл на кнопку падает. она не активна, если ничего не выбрано
    – Maneken
    Commented 1 апр. 2023 в 10:29
  • Понял, но в Реакте это делается не так, есть просто флаг disabled конкретно у кнопки, да даже и не в Реакте, кнопка должна быть реально не активна серенькой и не кликабельной. Я добавил пример в конце ответа. Commented 1 апр. 2023 в 10:43
  • спасибо, исправлю
    – Maneken
    Commented 1 апр. 2023 в 14:23

1 ответ 1

1

Решение заключается в заполнении selectedRadioInput: '160height' ведь он у Вас выбран.

const [data, setData] = React.useState({
    value1: '160height',
    value2: '165height',
    value3: '170height',
    selectedRadioInput: '160height' 
  });
  const [data1, setData1] = React.useState({
    value1: '40',
    value2: '42',
    value3: '44',
    value4: '46',
    value5: '48',
    selectedRadioInput1: '' 
  });

После этого ссылка открывается:

введите сюда описание изображения

Как сделать кнопку неактивной в реакте в зависимости от условия:

function isDisabledButton(){
  return data.selectedRadioInput === '' 
    || data1.selectedRadioInput1 === ''
}

<button 
  id="buttonPattern" 
  type="button" 
  onClick={handleClick}
  disabled={isDisabledButton()}
>button</button>

введите сюда описание изображения

2
  • спасибо большое, упустил этот момент
    – Maneken
    Commented 1 апр. 2023 в 8:08
  • пожалуйста, рад что помог, отметьте галочкой ответ Commented 1 апр. 2023 в 8:11

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.