如何将代码从“ React.createClass”更改为“ NoteNote类扩展组件”并使之工作

Question

Sorry for my not so very clever question, but I have a component like this (using ES6 classes).

import React, { Component } from 'react';
import ReactQuill from 'react-quill';
import { Field, reduxForm } from 'redux-form';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { addNote } from '../actions/actions';

class NoteNew extends Component {
  constructor(props) {
    super(props);
    this.state = {
      content: '',
    };
  }

  handleContentChange(value) {
    this.setState({ content: value });
  }

  onNoteReadySumbit(values) {
    const content = this.state.content;
    const currentTime = this.formatDateAndHour();
    const currentTimeRaw = new Date();
    this.props.addNote(
      { ...values, content, createTime: currentTime, timeRaw: currentTimeRaw },
      () => this.props.history.push('/')
    );
  }



  render() {
    const { handleSubmit } = this.props;
    return (
      <div className="row form-fields text-center">
        <form onSubmit={handleSubmit(this.onNoteReadySumbit.bind(this))}>


          <ReactQuill
            value={this.state.content}
            onChange={this.handleContentChange.bind(this)}
            name="content"
            labelToShow="content"
            component={this.renderFieldContent}
          />


          <button type="submit" className="btn btn-secondary submit-button">
            <i className="fa fa-check" aria-hidden="true" />
          </button>
          <Link to="/" className="btn btn-secondary back-button">
            <i className="fa fa-times" aria-hidden="true" />
          </Link>
        </form>
      </div>
    );
  }
}

function validate(values) {
  const errors = {};
  if (!values.title || values.title.length < 3) {
    errors.title = 'Enter note title that is at least 3 characters long!';
  }
  return errors;
}

function mapStateToProps(state) {
  return {
    addNoteStatus: state.addNoteStatus,
  };
}

export default reduxForm({
  validate,
  form: 'NoteNewFormUnique',
})(connect(mapStateToProps, { addNote })(NoteNew));

And I want to use react-quill settings, and fortunately docs are providing an example:

var MyComponent = React.createClass({

  modules: {
    toolbar: [
      [{ 'header': [1, 2, false] }],
      ['bold', 'italic', 'underline','strike', 'blockquote'],
      [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}],
      ['link', 'image'],
      ['clean']
    ],
  },

  formats: [
    'header',
    'bold', 'italic', 'underline', 'strike', 'blockquote',
    'list', 'bullet', 'indent',
    'link', 'image'
  ],

  render: function() {
    return (
      <div className="text-editor">
        <ReactQuill theme="snow"
                    modules={this.modules}
                    formats={this.formats}>
        </ReactQuill>
      </div>
    );
  },

});

So the example is using React.createClass but I don't know how I can use that objects ( modules: & formats: ) inside my ES6 class NoteNew extends Component . Sorry, not so good with react yet...

Could you please provide me an example?

TL;DR I want to add some settings to my <ReactQuill but I don't know how to use this old React.createClass example inside my class NoteNew extends Component code...

Answer 1

When using ES6 classes if you want to create this.modules and this.formats you could use class fields ( https://github.com/tc39/proposal-class-fields ) which is not currently part of the JS spec.

If you are using Babel then you can use this plugin: https://babeljs.io/docs/plugins/transform-class-properties/

class NoteNew extends Component {
  modules: {
    toolbar: [
      [{ 'header': [1, 2, false] }],
      ['bold', 'italic', 'underline','strike', 'blockquote'],
      [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}],
      ['link', 'image'],
      ['clean']
    ]
  }

  formats: [
    'header',
    'bold', 'italic', 'underline', 'strike', 'blockquote',
    'list', 'bullet', 'indent',
    'link', 'image'
  ]

  ...

}

If you don't want to use this transform, then you can put them in the constructor.

class NoteNew extends Component {
  constructor(props) {
    super(props);
    this.state = {
      content: '',
    };

    this.modules = ...
    this.formats = ...
  }
}

After this, your render() method would be the same as the one in your createClass example.