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

Question

有没有办法在选中时禁用或隐藏 a？

我想让 CreateQuotation 和 TakeNotes 按钮在未选中复选框时隐藏或禁用

这是我的代码的样子

const renderCheckbox = ({ input, label }) =>
  <FormControlLabel
    control={
      <Checkbox
        {...input}
        checked={input.value ? true : false}
        onCheck={input.onChange}
      />
    }
    label={label}
  />

const CreateReport = (props) => {
  const { handleSubmit, pristine, submitting } = props;

  return (
    <div className="create-report-form-container mobile-padding">
      <form onSubmit={handleSubmit}>
        <div>
          <Field name="quotation-checkbox" component={renderCheckbox} label="Quotation to do" />
        </div>

        <div>
          <Button raised color="accent" label="CreateQuotation">
            Create a Quotation
          </Button>
          <Button raised color="accent" label="TakeNotes">
            Take some notes
          </Button>
        </div>


        <Button raised color="accent" type="submit" label="send" disabled={pristine || submitting}>
          Send
        </Button>

      </form>
    </div>
  );
};


export default reduxForm({
  form: 'CreateReport',
  enableReinitialize: true,
})(CreateReport);

Answer 1

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

{ 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');
 }
}

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

Disable / hide button depending on checkbox

reactjs

material-ui

redux-form