チェックボックスに応じてボタンを無効/非表示にする

Question

このチェックボックスをオンにすると、無効にするか、非表示にする方法はありますか？私は、チェックボックスが

をチェックされていないとき相続人は私のコードは

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のような一定の変数を追加します非表示にしたり無効にしCreateQuotation & TakeNotesボタンをしたいと思い

チェックボックスの状態を切り替えたり、ボタンを表示/非表示にするには、返信領域でこれを行うことができます。

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