啓用按鈕只能提交所有的字段填寫

Question

我有一個有3個字段的表格。前兩個字段是email_from和email_subject，最後一個字段是編輯器。我已經使用了編輯器的draftjs。如果沒有編輯器，我可以啓用和禁用提交按鈕，但由於包含編輯器，我不知道如何才能啓用按鈕，只有當所有的字段都填充沒有錯誤。

這是我的代碼。

AdminEditor是具有draftjs編輯

class EmailTemplate extends React.Component { 
    state = { 
    emailSubject: '', 
    emailFrom: '' 
    }; 

    handleChange = event => 
    this.setState({ [event.target.name]: event.target.value }); 

    handleSubmit = event => { 
    event.preventDefault(); 
    }; 

    render() { 
    const { emailSubject, emailFrom } = this.state; 
    return (
     <form onSubmit={this.handleSubmit}> 
     <FieldGroup 
      id="formControlsText" 
      name="emailSubject" 
      type="text" 
      label="Email Subject" 
      placeholder="Enter Email Form" 
      onChange={this.handleChange} 
      validationState={emailSubject ? 'success' : 'error'} 
      required 
     /> 
     <FieldGroup 
      id="formControlsText" 
      name="emailFrom" 
      type="email" 
      label="Email From" 
      placeholder="Enter Email From" 
      onChange={this.handleChange} 
      validationState={emailFrom ? 'success' : 'error'} 
      required 
     /> 
     <AdminEditor /> 
     <Button type="submit"> 
      Submit 
     </Button> 
     </form> 
    ); 
    } 
} 

export default EmailTemplate; 

class AdminEditor extends React.PureComponent { 
    constructor(props) { 
    super(props); 
    this.state = { 
     editorState: EditorState.createEmpty(), 
     isEmpty: true 
    }; 
    } 

    onEditorStateChange = editorState => { 
    this.setState({ 
     editorState 
    }); 
    }; 

    onEditorChange = editorContent => { 
    this.setState({ 
     editorContent 
    }); 
    }; 

    handleChange = event => 
    this.state.editorState.getCurrentContent().hasText() 
     ? this.setState({ isEmpty: false }) 
     : this.setState({ isEmpty: true }); 

    render() { 
    const { editorState } = this.state; 
    return (
     <div> 
     <Editor 
      editorState={this.state.editorState} 
      initialContentState={rawContentState} 
      toolbarClassName="home-toolbar" 
      wrapperClassName="home-wrapper" 
      editorClassName="home-editor" 
      onEditorStateChange={this.onEditorStateChange} 
      toolbar={{ 
      textAlign: { inDropdown: true }, 
      }} 
      onContentStateChange={this.onEditorChange} 
      placeholder="write text here..." 
      onChange={this.handleChange} 
     /> 
     </div> 
    ); 
    } 
} 

export default AdminEditor; 

分量任何人都可以幫我嗎？

Answer 1

有很多方法可以做到這一點，主要基於將一些回調傳遞給更新父級狀態的受控組件。 一個簡單的方法是將傳遞設置一個標誌，如果編輯器爲空或不處理程序：

class AdminEditor extends React.PureComponent { 

... 

    handleChange = event => 
    this.props.setEditorIsEmpty(
     this.state.editorState.getCurrentContent().hasText() 
    ); 

然後在EmailTemplate：

setEditorIsEmpty(editorIsEmpty) { 
    this.setState({ 
    editorIsEmpty 
    }); 
} 

render() { 
    const { emailSubject, emailFrom } = this.state; 
    return (
    <form onSubmit={this.handleSubmit}> 

     ... 

     <AdminEditor 
     setEditorIsEmpty={this.setEditorIsEmpty} 
     /> 
     <Button 
     type="submit" 
     disabled={!emailSubject || !emailFrom || editorIsEmpty}> 
     Submit 
     </Button> 
    </form> 
); 
}