Javascript 如何在draftjs中应用验证

我有一个表格，其中包括电子邮件从，主题和文本使用的富格文本编辑器草案。我可以验证其他字段，但如何验证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>
  );
}

函数字段组（{validationState，…props}）{
控制台日志（道具）；
返回(
{props.label}
);
}
类EmailTemplate扩展了React.Component{
状态={
电子邮件发件人：“”
};
handleChange=事件=>
this.setState（{[event.target.name]：event.target.value}）；
render（）{
const{templateName，emailSubject，emailFrom}=this.state；
返回(
您可以使用draft.js的
onBlur
和
onFocus
鼠标事件


onBlur
当用户离开编辑器时，句柄将检查编辑器的内容
编辑器并单击其他位置。如果编辑器内容为空，则
在状态中将
editorValidated
设置为false

onFocus
句柄将始终将
editorValidated
设置为true
用户再次开始键入时没有错误


在
Editor
组件中，您可以使用
editorValidated
通过css类添加自定义样式

    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: '',
        editorValidated:true,
      };

      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 ${(this.state.editorValidated)?'validated','not-validated'}`
            onEditorStateChange={this.onEditorStateChange}
            toolbar={{
              history: { inDropdown: true },
              inline: { inDropdown: false },
              list: { inDropdown: true },
              link: { showOpenOptionOnHover: true },
              textAlign: { inDropdown: true },
              image: { uploadCallback: this.imageUploadCallBack }
            }}
            onFocus={()=>{this.setState({editorValidated:true})}}
            onBlur={()=>{this.setState({editorValidated:(this.state.editorState.getCurrentContent().getPlainText()!='')})}}
            onContentStateChange={this.onEditorChange}
            placeholder="write text here..."
            spellCheck
          />
        </div>
      );
    }

函数字段组（{validationState，…props}）{
控制台日志（道具）；
返回(
{props.label}
);
}
类EmailTemplate扩展了React.Component{
状态={
电子邮件发件人：“”，
编辑：对，
};
handleChange=事件=>
this.setState（{[event.target.name]：event.target.value}）；
render（）{
const{templateName，emailSubject，emailFrom}=this.state；
返回(
提交
);
}
}
导出默认邮件模板；
render（）{
const{editorContent，contentState，editorState}=this.state；
返回(
{this.setState（{editorValidated:true}}}
onBlur={（）=>{this.setState（{editorValidated:{this.state.editorState.getCurrentContent（）.getPlainText（）！=''}}}
onContentStateChange={this.onEditorChange}
占位符=“在此处写入文本…”
拼写检查
/>
);
}
您可以使用编辑器state.getCurrentContent（）.hasText（）

检查用户是否在编辑器中输入了任何文本，并相应地应用样式