javascript - 启用按钮仅在所有字段均已填写时才提交

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