Question

应用将接受的输入转换为React-Boostrap形式。 React-Bootstrap表单允许单行输入字段或TextAreas。普通文本区域设置如下，并且可以正常工作。

import React from "react";
import PropTypes from "prop-types";
import Form from "react-bootstrap/Form";

const Textarea = ({ name, placeholder, value, onChange, onBlur, text }) => {
   return (
      <Form.Group controlId={text.module + name}>
         <Form.Label>{text.label}</Form.Label>
         <Form.Control
            name={name}
            as="textarea"
            rows="10"
            placeholder={placeholder}
            value={value}
            onChange={onChange}
            onBlur={onBlur}
            isInvalid={text.error ? true : false}
         />
         <Form.Control.Feedback type="invalid">
            {text.error}
         </Form.Control.Feedback>
      </Form.Group>
   );
};

Textarea.propTypes = {
   name: PropTypes.string.isRequired,
   placeholder: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
   onBlur: PropTypes.func.isRequired,
   text: PropTypes.object.isRequired
};

export default Textarea;

这是我试图编辑的Draftjs WYSIWYG代码，但实际上我对如何使其像TextArea一样感到迷惑。

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Editor, EditorState } from 'draft-js';
import 'draft-js/dist/Draft.css';

const RichText = ({ name, placeholder, value, onChange, onBlur, text }) => {
  const [editorState, setEditorState] = useState(() =>
    EditorState.createEmpty()
  );

  return (
    <Editor
      editorState={editorState}
      onChange={setEditorState}

      name={name}
      as='textarea'
      rows='10'
      placeholder={placeholder}
      value={value}
      onChange={onChange}
      onBlur={onBlur}
      isInvalid={text.error ? true : false}
    />
  );
};

RichText.propTypes = {
  name: PropTypes.string.isRequired,
  placeholder: PropTypes.string.isRequired,
  value: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
  onBlur: PropTypes.func.isRequired,
  text: PropTypes.object.isRequired,
};
export default RichText;

PostForm.js页面如下。

import React from 'react';
import PropTypes from 'prop-types';
import { Form, Button, Container, Row, Col } from 'react-bootstrap';
import Textarea from '../form/Textarea';
import RichText from '../form/Draft';

const PostForm = ({ post, onChange, onBlur, loading, onSubmit }) => {
  const {
    slogan,
    body,
    errors,
  } = post;
  return (
    <Container>
      <Row>
        <Col className='mx-auto'>
          <Form noValidate onSubmit={onSubmit} className='p-sm-3 p-xs-1'>

           <RichText
              name='slogan'
              placeholder='Write your slogan here...'
              value={slogan}
              onChange={onChange}
              onBlur={onBlur}
              text={{
                module: 'post',
                label: 'Slogan',
                error: errors.slogan,
              }}
            />

            <Textarea
              name='body'
              placeholder='Write your post here...'
              value={body}
              onChange={onChange}
              onBlur={onBlur}
              text={{
                module: 'post',
                label: 'Description',
                error: errors.body,
              }}
            />
</Form>
        </Col>
      </Row>
    </Container>
  );
};

PostForm.propTypes = {
  post: PropTypes.object.isRequired,
  loading: PropTypes.bool.isRequired,
  onBlur: PropTypes.func.isRequired,
  onChange: PropTypes.func.isRequired,
  onSubmit: PropTypes.func.isRequired,
};

export default PostForm;

将React-Boostrap表单TextArea转换为WYSIWYG

0 个答案: