Question

如果选中，是否有办法禁用或隐藏？

我想CreateQuotation＆amp; {@ 1}}按钮在未选中复选框时隐藏或禁用

看看我的代码是什么样的

TakeNotes

Answer 1

我会添加一个常量变量，如isActive，它会切换复选框状态，并显示和隐藏按钮，您可以在返回区域执行此操作：

{ isActive ? <Button>create Quotation & Take notes </Button> : null }

您可以通过在状态更改中调用函数来获取isActive状态：

<input
   type="checkbox"
   onChange={(event) => this.handleCheck(event)}
   checked={true}
/>

constructor(props) {
      super(props);
      this.state = {
        isActive: {}
      };
      this.handleCheck = this.handleCheck.bind(this);
    }

handleCheck(event){
      isActive = event.target.checked;
      this.setState({ isActive: isActive });
    }

Answer 2

class Rq extends Component {

  constructor(){
    super();
    this.state = {
      option: '',
      isDisabled: true,
      checked: true    
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
}

handleChange(){
this.setState({checked: !this.state.checked});
  if (this.state.checked) 
  {
    this.setState({isDisabled: false})

  }
else

  this.setState({isDisabled: true});
}


handleSubmit(e){
 e.preventDefault();
 if (this.state.isDisabled===false) {
  alert('Form submitted')

 } else
 {
  alert('form has not submitted');
 }
}

根据复选框禁用/隐藏按钮

2 个答案: