启用按钮只能提交所有的字段填写

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