javascript - 如何在 draftjs 中应用验证

Question

我有一个表单，其中包括电子邮件的来源、主题和文本，该表单使用富文本编辑器的草稿。我可以验证其他字段，但我如何验证 draftjs 编辑器。当我点击编辑器输入时，如果它留空，它应该显示错误，否则成功，就像所附屏幕截图中的那样。

这是我的代码

function FieldGroup({ validationState, ...props }) {
  console.log(props);
  return (
    <FormGroup validationState={validationState}>
      <ControlLabel>{props.label}</ControlLabel>
      <FormControl {...props} />
    </FormGroup>
  );
}

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

  handleChange = event =>
    this.setState({ [event.target.name]: event.target.value });
  render() {
    const { templateName, emailSubject, emailFrom } = this.state;
    return (
      <form>
        <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;


render() {
  const { editorContent, contentState, editorState } = this.state;
  return (
    <div>
      <Editor
        editorState={this.state.editorState}
        initialContentState={rawContentState}
        wrapperClassName="home-wrapper"
        editorClassName="home-editor"
        onEditorStateChange={this.onEditorStateChange}
        toolbar={{
          history: { inDropdown: true },
          inline: { inDropdown: false },
          list: { inDropdown: true },
          link: { showOpenOptionOnHover: true },
          textAlign: { inDropdown: true },
          image: { uploadCallback: this.imageUploadCallBack }
        }}
        onContentStateChange={this.onEditorChange}
        placeholder="write text here..."
        spellCheck
      />
    </div>
  );
}

Answer 1

您可以使用 editorState.getCurrentContent().hasText() 检查用户是否在编辑器中输入了任何文本并相应地应用您的样式。