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

启用按钮仅在填写所有字段时提交

1 个答案: