Question

这可能是一件容易的事，但是我还没有弄清楚。我有两个单选按钮，如果两个都选中，我想将状态设置为true。

for (let i = 0; i < inputs.length; i += 1) {
    if (
        inputs[i].name === 'person' &&
        ((inputs[i].value === 'Employee' && inputs[i].checked === true) ||
        (inputs[i].value === 'Dependent' && inputs[i].checked === true))
       ) {
        inputs[i].style.border = '';
        this.setState({ personFilled: true });
    } else if (
        inputs[i].name === 'person' &&
        ((inputs[i].value === 'Employee' && inputs[i].checked === false) ||
        (inputs[i].value === 'Dependent' && inputs[i].checked === false))) {
        inputs[i].style.border = '2px solid red';
    }
 }

到目前为止，根据我的条件，它始终为假。

单选按钮代码

<label>Person</label>
<input
    type='radio'
    className='form-radio'
    name='person'
    id='person'
    value='Employee'
    onChange={gatherFormData}
/>
<span className='label'>Employee</span>
<input
    type='radio'
    className='form-radio'
    name='person'
    value='Dependent'
    onChange={gatherFormData}
/>
<span className='label'>Dependent</span>

Answer 1

您忘记将状态设置为false。该代码可以简化为：

for (let i = 0; i < inputs.length; i += 1) {
  if (inputs[i].name === 'person') {
    const checked = ((inputs[i].value === 'Employee' && inputs[i].checked) || (inputs[i].value === 'Dependent' && inputs[i].checked));
    inputs[i].style.border = checked ? '' : '2px solid red';
    this.setState({ personFilled: checked });
  }
}

请注意，您正在循环内设置状态，因此在每次迭代时都覆盖其值。您可以将填充的人员存储为数组，或者根据索引存储不同的项目。如果您的输入在用户界面中仅存在一次，则不应使用for循环并按id引用它们，如注释中所述。

Answer 2

只需使用Array.prototype.some()：

/*For phones till ipad pro*/
@media screen and (max-width: 1024px) {
/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  border-radius: 5px;
  border: 1px solid #888;
  width:  100%;
  height: 80%;


}
.content-img-wrapper .img img{
    /*width:90%;*/
        margin-left: 8px;
    }
}
/* For just phones*/
@media screen and (max-width: 767px) {
.content-img-wrapper{
 flex-direction: column;
}
  .content-img-wrapper .content p {
    /* justify-content: space-around; */
    font-size: 25px;
    transform:unset;

}
.content-img-wrapper .content ul li {
   font-size: 15px;

    transform: translate(-10%,100%);
}
.content {
    transform: translate(15%);
}
.modal-content {
    width:90%;
    min-height: 90%;

transform:unset;
}
i.right{
transform: scale(0.7)translate(0%,-20%) rotate(-45deg);
}

}
@media screen and  (min-width: 320px) and (max-width: 360px) {
    .modal{
        padding-top:unset;
        }
.modal-content {

    height: 82%;
}
.content-img-wrapper .content p {

    font-size: 22px;
}

}
@media  screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) { 
.modal-content {
    width: 90%;
    height: 64%;

}

}
@media screen 
  and (device-width: 411px) 
  and (device-height: 823px) 

   {
.modal-content {
    width: 90%;
    height: 66%;

}

}

@media screen 
  and (device-width: 320px) 
  and (device-height: 568px) 

   {
.content {
    transform: translate(11%);
}

}
/*Ipad and Ipad pro specific styles*/
@media  screen 
  and (min-width: 768px) 
  and (max-width: 1279px) 
  {
    .content {

    transform: translate(30%);
    }
    .content-img-wrapper .content ul li {

    transform: translate(-2%,132%);
   margin-bottom: 20px;
}
.content-img-wrapper {
    padding-top: 20px;
    flex-direction: column;
flex-wrap:unset;
}
.content-img-wrapper .img img {
    width: 90%;
    height: auto;
      margin-left: 60px;
}

a.btn-ga {
        transform: translate(0%,80%);
    font-size: 2rem;
        line-height: 3rem;
        width: 29rem;
    height: 3rem;
    }
i.arrow-button {

    transform: scale(1.5)translateY(-25%) rotate(-45deg);
    margin-right: 10px;
}

}
/*For laptops and bigger*/
@media screen and (min-width: 1280px) {
    .content-img-wrapper{

    justify-content: space-around;
    transform: translateY(30%);

}
.content-img-wrapper .content {
    padding-top: 30px;
}
.modal-content {

  width: 1250px; 

}
.content-img-wrapper .content ul li{

        transform: translate(-4%,200%);
    padding-bottom: 10px;
    }
a.btn-ga{
    transform: translate(0%,200%);
    width:483px;
    font-size: 2rem;
        line-height: 4rem;
    height:58px;
    }
i.arrow-button {
    border: solid #fff;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    transform: scale(1.5) translateY(-33%) rotate(-45deg);
    margin-right: 10px;
}
#ga-icons {
    font-size: 20px;

}
}

@media screen and (min-width: 1280px) and (max-height: 800px){
.content-img-wrapper {
    transform: translateY(20%);
}


}

假设if ([...inputs].some(x=>x.checked)) { this.setState({ personFilled: true }) };是一个inputs，其中仅包含相关的单选按钮。

Answer 3

我稍微修改了您的代码并添加了一些HTML，它对我来说像这样：

function handler() { 
    this.setState = function(state) {
        console.log(state);
    }
    inputs = document.querySelectorAll('input');
    for (let i = 0; i < inputs.length; i += 1) {
        if (inputs[i].name === 'person' &&
            ((inputs[i].value === 'Employee' && inputs[i].checked === true) ||
            (inputs[i].value === 'Dependent' && inputs[i].checked === true))
        ) {
            inputs[i].style.border = '';
            this.setState({ personFilled: true });
        } else if (inputs[i].name === 'person' &&
            ((inputs[i].value === 'Employee' && inputs[i].checked === false) ||
            (inputs[i].value === 'Dependent' && inputs[i].checked === false))
        ) {
            inputs[i].style.border = '2px solid red';
        }
    }
}

var element = document.querySelector('button')
if (element.addEventListener) {
    element.addEventListener('click', handler, false);
} else {
    element.attachEvent('onclick', handler);
}

<input name="person" type="radio" value="Employee">Employee</input>
<input name="person" type="radio" value="Dependent">Dependent</input>
<button>Submit</button>

如果选中两个单选按钮之一，则标记为true

3 个答案: