时间戳

首页 > 解决方案 > 如何在 React js 中单击复选框时启用/禁用按钮？

javascript - 如何在 React js 中单击复选框时启用/禁用按钮？

问题描述

有人可以帮我处理这段代码吗？我研究了很多，我被困住了。

class App extends Component{
   constructor(props){
     super(props);
    this.isChecked=this.isChecked.bind(this);
   }
 }
 isChecked = (chk,sub1) => {
   var btn = document.getElementById(sub1);
     if (chk.checked == true) {
         btn.disabled = false;
     } else {
         btn.disabled = true;
     };
  
 }



function App(){         
return(
     <form>
    <div className='check'>
      <input 
      type='checkbox'
      className='checkbox'
      id='termschkbx'
      onchange="isChecked(this,'sub1')"
      />
      
      <span>I agree to Terms & Conditions.<a href="" className='readme'>Read here</a> </span>
    </div>
    <div>


    <button
    type="submit"
     id="sub1"
     disabled='disabled'
     className=" createaccount" 
     type="submit">CREATE ACCOUNT</button>
    </div>
    </form>
)
}

如何解决这个问题？

错误：标识符“App”已被声明。

有没有有效的方法来做到这一点？

标签： javascriptreactjs

解决方案

有什么方法可以设置我的提交按钮的样式吗？（即）它应该在禁用时具有一种特定的颜色，而在启用时应该具有一种特定的颜色。

有一个 CSS 选择器:disabled，当它被禁用时，您可以使用它来设置按钮的样式。

看起来你还没有使用任何 CSS 解决方案，我建议你使用CSSModule或样式组件

错误：标识符“App”已被声明。

您定义App了两次：

class App extends Component { ...

function App(){ ...

删除一个并解决错误，但根据上下文，您可能应该将function App()into 函数的内容移动到render()您的class App

另外，我不建议混合匹配 React 其他框架

推荐阅读