I want to work with rich text editor but I cannot find any informative documentation to use in react function base components.I used the wysiwyg editor by draftjs the text editor is shown as enter image description here
the code of the react file is
import React, { useContext, useEffect, useState } from 'react'
import Modal from 'react-bootstrap/Modal';
import Button from 'react-bootstrap/Button';
import { Editor } from 'react-draft-wysiwyg';
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
import cityContext from "../context/cities/CityContext"
export default function CreatePost(props) {
// const [editorState,setState] = useState(EditorState.createEmpty());
const cities = useContext(cityContext);
let editorState = useState("");
const onEditorStateChange = () => {
// alert("here");
console.log(editorState);
}
return (
<div>
<Modal className="text-center"
{...props}
size="lg"
centered
>
<Modal.Body >
<input type="text" className="form-control my-2 p-3" placeholder='Enter title of the text'></input>
<input type="file" className="form-control my-2 p-3" placeholder='Enter title of the text'></input>
<select name="" id="" className="form-control cityField p-3 my-2" placeholder='select city'>
<option className='cityField' value="">--select city for the article--</option>
{cities.map(cityObj => <option key={cityObj.city} value="" className='cityField' >
{cityObj.city}</option>)}
</select>
<Editor className="editor"
onChange={onEditorStateChange}
/>
</Modal.Body>
<Modal.Footer>
<Button className="btn btn-danger form-control" onClick={props.onHide}>cancel</Button>
<Button className="btn btn-success form-control" onClick={props.onHide}>submit</Button>
</Modal.Footer>
</Modal>
</div>
)
}
I cannot find any solution that How I can handle the input data and how to store the input data in any variable to store the data in database.
react-draft-wysiwyg is using draft-js as core of the package and you can use this link to achieve what you want:
https://draftjs.org/docs/quickstart-api-basics#controlling-rich-text
Keep in mind that you have to create the initial state of editorState with EditorState.createEmpty()
EditorState should be available to import from react-draft-wysiwyg.
Related
Using React and Material-UI Core.
I am trying to fill in the inputs by using autofill. The password manager does show on the inputs however as soon as I click on the item nothing happens.
Is there a way to enforce it to work?
import * as React from 'react';
import { Dialog, DialogActions, Button, DialogContent, DialogContentText, DialogTitle } from '#material-ui/core';
export default function FormDialog() {
const [open, setOpen] = React.useState(true);
return (
<div>
<Dialog open={open} onClose={handleClose}>
<DialogTitle>Subscribe</DialogTitle>
<DialogContent>
<DialogContentText>
To subscribe to this website, please enter your email address here. We will send updates
occasionally.
</DialogContentText>
<form>
<label>
<input
type="text"
name="username"
placeholder="Username"
required
/>
</label>
<label>
<input type="password" name="password" placeholder="Password" required />
</label>
<button type="submit">Login</button>
</form>
</DialogContent>
<DialogActions>
<Button>Subscribe</Button>
</DialogActions>
</Dialog>
</div>
);
}
I'm trying to use the react + bootstrap + bootstrap-select. I've successfully changed the select dropdown to bootstrap-select but the click event's aren't getting triggered.
import React, { useEffect, useRef, createRef,forwardRef } from 'react';
import { Modal, ModalHeader, ModalBody, ModalFooter, Col, Row, Button, Form, FormGroup, Label, Input } from 'reactstrap';
import $ from 'jquery';
import 'bootstrap-select/dist/js/bootstrap-select.min.js';
import 'bootstrap-select/dist/css/bootstrap-select.min.css';
const AddPModal = ({ addPModalShow, hideModal }) => {
const handleSelectPicker = ()=>{
console.log($('#add_tag').selectpicker());
}
return (
<Modal size="lg" isOpen={addPModalShow} centered={true} onOpened={handleSelectPicker}>
<ModalHeader>Add New Prospect</ModalHeader>
<ModalBody>
<Form>
<Row form>
<Col md={6}>
<FormGroup>
<Label for="add_tag">tag</Label>
<select name="tag" id="add_tag" className="form-control">
<option>1</option>
<option>2</option><option>3</option>
</select>
</FormGroup>
</Col>
</Row>
</Form>
</ModalBody>
<ModalFooter>
<Button color="primary">Save</Button>
<Button color="secondary" onClick={hideModal}>Cancel</Button>
</ModalFooter>
</Modal>
);
}
export default AddPModal;
...
<select name="tag" id="add_tag" className="form-control selectpicker">
<option>1</option>
<option>2</option><option>3</option>
</select>
...
Add selectpicker class to your select elements to auto-initialize bootstrap-select.
For more info click here
Even you can use:
useEffect(() => {
$("#mySelect").selectpicker("refresh");
}, []);
To initialize your selectpicker element (it will render properly) - it will not work as the jquery event handlers are not called (required for all functionality.
Best is to avoid jquery in your react project.
I am working on a React project, In my project I have one button If I click that button one
model is appearing. In that Model I have two Input tags and three buttons.
Here comes the login, In UI If Input tags have a Value then I have to hide Blue button in UI.
And If In UI If Input tags have no Value then I have to hide Red Buuton in UI this time I have
to show Blue button.
This is App.js
import React, { useState } from 'react';
import './App.css';
import Form from './Form/Form';
function App() {
const [show, setShow] = useState(false)
return (
<div className="App">
<button className='btn btn-danger'
onClick={() => setShow(true)}>Click here</button>
{ show && <Form></Form>}
</div>
);
}
export default App;
This is Form.js
import React, { useState } from 'react';
import './Form.css';
import {
Row,
Col,
Button,
ButtonGroup,
Card,
CardHeader,
CardSubtitle,
CardBody,
CardText,
Container,
Modal,
ModalBody,
ModalFooter,
ModalHeader,
FormGroup,
Label,
Input,
UncontrolledButtonDropdown,
DropdownToggle,
DropdownMenu,
DropdownItem
} from 'reactstrap';
const Form = () => {
const fun = () => {
}
return (
<div>
<Row>
<Col md="6" sm="6" xs="6">
<Modal
isOpen>
<ModalHeader >Add Role</ModalHeader>
<ModalBody>
<FormGroup>
<Label for="exampleName">Name</Label>
<Input
type="text"
name="name"
placeholder="Enter Your Name"
value='Tom'
/>
</FormGroup>
<FormGroup>
<Label for="exampleEmail">Description</Label>
<Input
type="textarea"
name="description"
placeholder="Enter Description"
value='React developer'
/>
</FormGroup>
</ModalBody>
<ModalFooter>
<Button color="secondary">
Cancel
</Button>
<Button className='one' color="primary">
Blue
</Button>
<Button color='danger'>Red</Button>
</ModalFooter>
</Modal>
</Col>
</Row>
</div>
)
}
export default Form
If you feel I am not clear with my doubt please put a comment.
you can check truthy value. If input has value, show 1 button and hide the other
const Form = () => {
const [value1, setValue1] = useState('');
const [value2, setValue2] = useState('');
return (
<div>
<Input
type="text"
name="name"
placeholder="Enter Your Name"
value={value1}
onChange={e => setValue1(e.target.value)}
/>
<Input
type="text"
name="value2"
placeholder="Enter Your Email"
value={value2}
onChange={e => setValue2(e.target.value)}
/>
{(!value1 || !value2) && <Button>Blue</Button>} // Show button if there is some value
{(value1 && value2) && <Button>Rad</Button>} // Show button if field is empty
</div>
);
}
I have a form inside of a component that adds items to an array when submitted using useState. I want to use these array values as options in a select input of another component. The problem is that there's not a parent-child relationship. What would be the best way to go about this?
The component generating processes array:
import React, {useState, useEffect} from 'react';
import {useForm} from 'react-hook-form';
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';
function AddProcessForm () {
const {register, handleSubmit, watch, errors} = useForm();
const [processes, setProcesses] = useState([]);
const onSubmit = data => {
setProcesses(processes => [...processes, data])
console.log(data)
document.getElementById("process-entry-form").reset();
}
useEffect(() =>{
console.log(processes);
})
return (
<Form id="process-entry-form" onSubmit={handleSubmit(onSubmit)}>
<Form.Group controlId="" className="mx-2">
<Form.Label>Add Process</Form.Label>
<Form.Control name="processname" type="text" placeholder="Enter Process Name" ref={register}/>
</Form.Group>
<Button variant="primary" type="submit" className="mb-2">
Submit
</Button>
</Form>
)
}
export default AddProcessForm;
The component that needs to use processes as select options:
import React from 'react';
import Form from 'react-bootstrap/Form';
function ActivitytoProcessInput () {
return (
<Form.Group controlId="" className="mx-2">
<Form.Label>Belongs to Process</Form.Label>
<Form.Control as="select">
<option value="" selected>Select a Process</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</Form.Control>
</Form.Group>
)
}
export default ActivitytoProcessInput;
I am working on a React-Redux app, currently working on showing a modal box on a button click of a form. But I can't make it work. I have tried so many things but can't figure out why the modal box doesn't appear. Here is my code.
The Modal component file
import React from 'react'
import { connectModal } from 'redux-modal'
import { Button, Modal } from 'react-bootstrap'
import UpdatePasswordForm from 'forms/updatepassword'
export class UpdatePassword extends React.Component {
constructor(props) {
super(props)
}
renderCloseIcon (handleHide) {
return (
<button className='close' onClick={ handleHide }>
<span>
<i className="modal__close"/>
</span>
</button>
)
}
renderModalLogo () {
return (
<div className="modal__header modal__header_login">
<div className="modal__logo"></div>
</div>
)
}
render() {
const { show, handleHide } = this.props
return (
<Modal
show={ show }
onHide={ handleHide }
backdrop={ true }
className="modal_dark modal_center"
dialogClassName="modal-background-fix">
<div className="modal__container">
{ this.renderCloseIcon(handleHide) }
{ this.renderModalLogo() }
<div className="modal__content">
<UpdatePasswordForm onSubmit={() => {}}/>
</div>
</div>
</Modal>
)
}
}
export default connectModal({name: 'updatepassword'})(UpdatePassword)
The form that is loaded in the Modal
import React from 'react'
import { Field, reduxForm } from 'redux-form'
import Text from '../containers/Text'
const I18n = {}
I18n.t = Text.t
const UpdatePasswordForm = (props) => {
const { handleSubmit, pristine, reset, submitting } = props
return (
<form onSubmit={handleSubmit}>
<fieldset className="form-group">
<Field name="current_password" component="input"
type="password" placeholder="Password" className="form-control" />
</fieldset>
<fieldset className="form-group">
<Field name="password" component="input"
type="password" placeholder="New Password" className="form-control" />
</fieldset>
<fieldset className="form-group">
<Field name="password_confirm" component="input" type="password"
placeholder="New password confirmation" className="form-control" />
</fieldset>
<fieldset className="form-group form-group_btns">
<button type="submit" disabled={pristine || submitting} className="btn btn-primary btn-block">
{ 'CHANGE PASSWORD' }
</button>
</fieldset>
</form>
)
}
export default reduxForm({
form: 'updatepassword' // a unique identifier for this form
})(UpdatePasswordForm)
The file where modal is called
import React from 'react';
import './EditInformation.scss'
import { show } from 'redux-modal'
import UpdatePassword from './Modals/UpdatePassword'
// TODO fix stylee stylee
// TODO onChange is not updating correctly, FIX!
const EditInformation = ({ onSubmit, onChange, user, formSubmitting }) => {
return (
<div>
<UpdatePassword />
<form className='form-line form-line_light'>
<div className='col-xs-16 col-sm-8'>
<fieldset className='form-group'>
<button
onClick={(e) => {
show('updatepassword')
e.preventDefault()
}}
className='btn btn-secondary btn-lg profile-edit__addcard'
style={ { position: 'relative', top: '-27px' } }>
<i className='fa fa-plus'/>Vaihda salasana
</button>
</fieldset>
</div>
</form>
</div>
);
};
export default EditInformation;
In the beginning of our project, I tried to develope my own modal with all custom functionalities. Many problems has occured. I searched some open source projects, then I found a project on github. You should use react-modal, It's easy to use and well designed.
react-modal
There was a stupid mistake that I have figured out now. But I should get an error for that which I am not getting. I had to pass 'show' to the const EditInformation which I have done now and it is working all fine. Here is that part of the code:
const EditInformation = ({ onSubmit, onChange, user, formSubmitting, show }) => {
I wasn't passing 'show' previously.