I have a form which has 3 field. First two fields are email_from and email_subject and the last field is an editor. I have used draftjs for editor. If there is no editor i could enable and disable the submit button but due to the inclusion of the editor i did not know how can i enable the button only when all the fields are filled with no error.
Here is my code.
AdminEditor is the component which has draftjs editor
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;
Can anyone please help me?
There are many ways to do this, mostly based around passing some callbacks down into the controlled component which updates the state in the parent.
A simple way would be to pass a handler that sets a flag if the editor is empty or not:
class AdminEditor extends React.PureComponent {
...
handleChange = event =>
this.props.setEditorIsEmpty(
this.state.editorState.getCurrentContent().hasText()
);
Then in 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>
);
}
Related
I have a search box in my header. i can clear my state after searching but the input doesn't get cleared.
I'm purely using the Searchbox to generate a dropdown that contains links to their respective field. So the input field is purely used to mimic a searc
I tried targeting it with refs but when i finally reach the value i can't use the search anymore.
There is a ref for SearchBarHeader, SearchBox and SearchField. But i'm not sure if that is the correct way to do it.
clearSearchBar = () => {
this.searchBarHeader.current.searchBox.current.searchField.current.value = '';
};
and the code for the searchbox.
class Search extends Component {
state = {
organisationNames: [],
errorMessage: null,
};
searchField = React.createRef();
async componentDidMount() {
const organisations = await getSearch();
this.setState({
organisationNames: organisations,
});
}
searchHandler = (e) => {
const searchValue = e.target.value.toLowerCase();
if (!searchValue) {
this.props.clearSearchResult();
} else {
const result = this.state.organisationNames.filter((organisationName) => {
return organisationName.toLowerCase().includes(searchValue);
});
this.props.setSearchResult(result, () => {
if (this.props.searchResult.length === 0) {
this.setState({
errorMessage: "No Results...",
});
} else {
this.setState({
errorMessage: null,
});
}
});
}
};
clearSearchInput = () => {
this.props.clearSearchResult();
};
render() {
return (
<div className="search">
<div className="form-group">
<input
ref={this.searchField}
type="search"
placeholder="Search for company"
onChange={this.searchHandler}
/>
</div>
<div className="search-result-wrapper">
<ul className="search-results">
{this.props.searchResult === undefined ? (
<Skeleton />
) : (
this.props.searchResult.map((res, id) => {
return (
<Link
key={id}
to={"/r/" + res}
onClick={this.clearSearchInput}
>
<li className="search-item">{res || <Skeleton />} </li>
</Link>
);
})
)}
{this.state.errorMessage === null ? (
""
) : (
<li>{this.state.errorMessage}</li>
)}
</ul>
</div>
</div>
);
}
}
export default Search;
It seems to me that you're missing the "value" attribute on your input that makes it reactive to changes in your state. Grabbing one example from react docs, here's the ideal setup:
this.state = {value: ''};
(...)
handleChange(event) {
this.setState({value: event.target.value});
}
(...)
<input type="text" value={this.state.value} onChange={this.handleChange} />
By following the method above, you won't need to use refs to manually clear the input value. Once the form is submitted, you can simply clear your state...
this.setState({value: ''});
... and your input should be cleared.
Here's the link for the docs: https://reactjs.org/docs/forms.html
You are clearing the ref, not the state. There is also not a value attached to your input, so even if the state was cleared, it will not reflect.
You will of course be able to make the form data more dynamic, without having to set and keep companyName constant.
Here is a simple working example is here: https://codesandbox.io/s/flamboyant-voice-oj85u?file=/src/App.js
export default function App() {
const [formData, setFormData] = useState({ companyName: "" });
const handleChange = (e) => {
setFormData({ companyName: e.target.value });
};
const handleClear = () => {
setFormData({ companyName: "" });
};
return (
<div className="search">
<div className="form-group">
<input
type="search"
name="companyName"
value={formData.companyName}
placeholder="Search for company"
onChange={handleChange}
/>
<button onClick={handleClear}>Clear</button>
</div>
<pre>{JSON.stringify(formData, null, 2)}</pre>
</div>
);
}
I entered some data in textbox and after that I clicked on the Button.
After clicked on the button The data should be reset.
class Header extends Component {
constructor(props) {
super(props)
this.state = {
title: 'React App',
keywords: 'Type Above'
}
}
inputData = (event) => {
console.log(event.target.value)
this.setState({ keywords: event.target.value ? event.target.value : 'Type Above' })
}
handleSubmit = (event) => {
event.preventDefault();
alert('Button Clicked');
this.setState({ keywords: "" });
}
render() {
return (
<div>
<h2>{this.state.title}</h2>
<form onSubmit ={this.handleSubmit}>
<center>
<input type="text"
placeholder="Search Value..."
onChange ={this.inputData} />
<h3>{this.state.keywords}</h3>
</center>
<button> BUtton </button>
</form>
</div>
)
}
}
Data should get reset after button is clicked...
You need to provide value prop to your input,
<input type="text"
placeholder="Search Value..."
onChange ={this.inputData}
value = {this.state.keywords}
/>
Lear more about Controlled Component.
Demo
class Header extends Component {
constructor(props) {
super(props);
this.state = {
title: "React App",
keywords: "Type Above"
};
}
inputData = event => {
console.log(event.target.value);
this.setState({
keywords: event.target.value ? event.target.value : "Type Above"
});
};
handleSubmit = event => {
event.preventDefault();
alert("Button Clicked");
this.setState({ keywords: "" });
};
render() {
return (
<div>
<h2>{this.state.title}</h2>
<form onSubmit={this.handleSubmit}>
<center>
<input
type="text"
placeholder="Search Value..."
value={this.state.keywords === 'Type Above' ? '' : this.state.keywords}
onChange={this.inputData}
/>
<h3>{this.state.keywords}</h3>
</center>
<button> BUtton </button>
</form>
</div>
);
}
}
your problem is that you didn't assign the keywords value to the input, because the value is correctly deleted after you click the button, you can see it here:
class Header extends Component {
state = {
title : 'React App',
keywords : 'Type Above'
};
inputData = event => {
console.log(event.target.value)
this.setState({ keywords: event.target.value ? event.target.value : 'Type Above' });
};
handleSubmit = event => {
event.preventDefault();
alert('Button Clicked');
this.setState({ keywords: "" });
};
render() {
const { keywords, title } = this.state;
return (
<div>
<h2>{title}</h2>
<form onSubmit={this.handleSubmit}>
<center>
<input
type="text"
placeholder="Search Value..."
onChange={this.inputData}
value={keywords}
/>
<h3>{keywords}</h3>
</center>
<button>Button </button>
</form>
</div>
)
}
}
Hope this helps, Regards.
You are missing value attribute for your input. You need to add something like this value={this.state.keywords}
Hi I write a small component
export default class TextInput extends React.Component {
constructor(props) {
super(props);
this.onKeyPress = this.onKeyPress.bind(this);
this.state = { tags: [], value: "" };
}
onKeyPress(e) {
if (e.key === "Enter") {
this.setState({ tags: [...this.state.tags, e.target.value], value: "" });
}
}
render() {
return (
<div>
<div styleName="fieldset width-95">
<label>Tags</label>
<div>
<div>
{this.state.tags.map(tag => (
<span>{tag}</span>
))}
</div>
<input
type="text"
onKeyPress={this.onKeyPress}
value={this.state.value}
/>
</div>
</div>
</div>
);
}
}
after writing 1st time when I enter.it creates a tag but after that, I can't type anything in the input field. can anyone please explain how to enable typing so that I will be able to create another tag.
You also need an onChange handler as well to update state on user-input. Otherwise this.state.value will never update.
class TextInput extends React.Component {
constructor(props) {
super(props);
this.onKeyPress = this.onKeyPress.bind(this);
this.state = { tags: [], value: "" };
}
onKeyPress(e) {
if (e.key === "Enter") {
this.setState({ tags: [...this.state.tags, e.target.value], value: "" });
}
}
handleOnChange = e => {
this.setState({
value: e.target.value
});
};
render() {
return (
<div>
<div styleName="fieldset width-95">
<label>Tags</label>
<div>
<div>
{this.state.tags.map(tag => (
<span>{tag}</span>
))}
</div>
<input
type="text"
onChange={this.handleOnChange}
onKeyPress={this.onKeyPress}
value={this.state.value}
/>
</div>
</div>
</div>
);
}
}
See working sandbox: https://codesandbox.io/s/serene-https-t02h2
The problem is that you forgot to add an onClick event for the input, this will handle when you type something in it (You only need to update the state every time the onChange event is fire), like this (I've also made an update to a more ES6 syntax):
import React, { Component } from 'react';
export default class TextInput extends Component {
state = { tags: [], value: "" };
onKeyPress = e => {
if (e.key === "Enter") {
this.setState({ tags: [...this.state.tags, e.target.value], value: "" });
}
};
onClick = e => {
if (e && e.target && e.target.value) {
this.setState({ value: e.target.value });
}
};
render() {
const { tags, value } = this.state;
return (
<div>
<div styleName="fieldset width-95">
<label>Tags</label>
<div>
<div>
{tags.map(tag => (
<span>{tag}</span>
))}
</div>
<input
type="text"
onChange={this.onClick}
onKeyPress={this.onKeyPress}
value={value}
/>
</div>
</div>
</div>
);
}
}
You can try below code.And you remove value which you are set on state.And use onChange method.
import React, { Component } from 'react';
export default class TextInput extends React.Component {
constructor(props) {
super(props);
this.onKeyPress = this.onKeyPress.bind(this);
this.state = { tags: [] };
}
onKeyPress(e) {
if (e.key === "Enter") {
this.setState({ tags: [...this.state.tags, e.target.value], value:
e.target.value });
console.log("tag:",this.state.tags)
}
}
handleInputChange = (event) => {
this.setState({ [event.target.name]: event.target.value });
};
render() {
return (
<div>
<div styleName="fieldset width-95">
<label>Tags</label>
<div>
<div>
{this.state.tags.map(tag => (
<span >{tag}</span>
))}
</div>
<input
type="text"
onKeyPress={this.onKeyPress}
name="demo"
value={this.state.value}
onChange={this.handleInputChange}
/>
</div>
</div>
</div>
);
}
}
I am using rendering elements from dynamodb using serverless and showing in a card dashboard and when i am editing the card i want to see the contents that are already present in the card .
Edit.js
import React, { Component } from "react";
import { Form, Modal, Button, Container, Icon } from "semantic-ui-react";
import Amplify, { API } from "aws-amplify";
const uuidv1 = require("uuid/v1");
class EditItemModal extends Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.deleteItem = this.deleteItem.bind(this);
this.state = { item: this.props.item };
}
deleteItem() {
let apiName = "ServerlessReactExampleCRUD";
let path = "/ServerlessReactExample/object/" + this.props.item[0].ID;
API.del(apiName, path)
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error.response);
});
this.props.getItems();
this.handleClose();
}
handleChange(event, { name, value }) {
this.setState({ [name]: value });
}
handleSubmit(event) {
let apiName = "ServerlessReactExampleCRUD";
let path = "/ServerlessReactExample";
let editItem = {
body: {
ID: this.props.item[0].ID,
name: this.state.name,
price: this.state.price,
description: this.state.description
}
};
API.put(apiName, path, editItem)
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error.response);
});
this.props.getItems();
this.handleClose();
event.preventDefault();
}
handleOpen = () => this.setState({ modalOpen: true });
handleClose = () => this.setState({ modalOpen: false });
render() {
return (
<Container style={{ padding: 10 }}>
<Modal
trigger={
<Button icon onClick={this.handleOpen}>
<Icon name="edit" />
</Button>
}
open={this.state.modalOpen}
closeIcon
onClose={this.handleClose}
>
<Modal.Header>Edit</Modal.Header>
<Modal.Content>
<Form onSubmit={this.handleSubmit}>
<Form.Group unstackable widths={2}>
<Form.Input
name="name"
label="Item Name"
placeholder="Edit Item Name..."
onChange={this.handleChange}
value={this.state.name}
/>
<Form.Input
name="price"
label="Item Price"
placeholder="£0.00"
onChange={this.handleChange}
value={this.state.price}
/>
</Form.Group>
<Form.TextArea
name="description"
label="Item Description"
placeholder="Edit Description of the Item..."
onChange={this.handleChange}
value={this.state.description}
/>
<Form.Button type="submit">Submit</Form.Button>
</Form>
</Modal.Content>
<Modal.Actions>
<Button icon labelPosition="left" onClick={this.deleteItem}>
<Icon name="delete" />
Delete Item
</Button>
</Modal.Actions>
</Modal>
</Container>
);
}
}
export default EditItemModal;
This is how the card looks like
When i clicked on edit button it will look like this
What i want to show the values that are present in the card ? I want to know how i can bind them to show in the card ?
Any help is appreciated.
Ref : Ref links
As Simão wrote you're probably accessing wrong element
this.state = { item: this.props.item };
creates this.state.item (with your values/properties inside ?)
If you don't want to change everything probably this will fix it:
this.state = { ...this.props.item };
I would move operations into parent to keep all (CRUD) in one place. Updating/deleting item on list in handlers could avoid unnecessary list reloading (getItems) and done before api call would work as optimistic update.
suppose a page contains multi-stage form, in 1st stage of form contains input field for name and in second stage it contains input for file , onChange sets state values for name and file,but when we move back and forth like 1st stage to 2nd stage and sencond stage, we can hold value for input type name but how to hold value for input type file.
import React, { Component } from "react";
class App extends Component {
constructor(props) {
super(props);
this.state = {
pageone: true,
pagetwo: false,
pagethree: false,
pageonedata: "",
pagetwodata: "",
pagethreedata: ""
};
this.nextPage = this.nextPage.bind(this);
this.prevPage = this.prevPage.bind(this);
this.togglePage = this.togglePage.bind(this);
}
prevPage() {
if (this.state.pagetwo === true) {
this.setState({
pageone: !this.state.pageone,
pagetwo: !this.state.pagetwo
});
} else if (this.state.pagethree === true) {
this.setState({
pagethree: !this.state.pagethree,
pagetwo: !this.state.pagetwo
});
}
}
nextPage() {
if (this.state.pageone === true) {
this.setState({
pageone: !this.state.pageone,
pagetwo: !this.state.pagetwo
});
} else if (this.state.pagetwo === true) {
this.setState({
pagetwo: !this.state.pagetwo,
pagethree: !this.state.three
});
}
}
togglePage() {
this.setState({
pageone: !this.state.pageone,
pagetwo: !this.state.pagetwo
});
}
handleChange = e => {
this.setState({ ...this.state, [e.target.name]: e.target.value });
};
handleChange = e => {
this.setState({ ...this.state, [e.target.name]: e.target.files[0] });
};
render() {
return (
<div style={{ margin: "250px 500px" }}>
{this.state.pageone && (
<form>
<label>
<h4>page one</h4>
</label>
<input
type="text"
name="pageonedata"
value={this.state.pageonedata}
onChange={this.handleChange}
/>
</form>
)}
{this.state.pagetwo && (
<form>
<label>
<h4>page two</h4>
</label>
<input
type="file"
name="pagetwodata"
value={this.state.pagetwodata}
onChange={this.handleFile}
/>
</form>
)}
{this.state.pagethree && (
<form>
<label>
<h4>page three</h4>
</label>
<input
type="text"
name="pagethreedata"
value={this.state.pagethreedata}
onChange={this.handleChange}
/>
</form>
)}
<br />
<button
type="submit"
onClick={this.prevPage}
disabled={this.state.pageone ? true : false}
>
previous
</button>{" "}
<button
type="submit"
onClick={this.nextPage}
disabled={this.state.pagethree ? true : false}
>
next
</button>{" "}
<button
type="submit"
onClick={this.togglePage}
disabled={this.state.pagethree ? false : true}
>
finish
</button>
</div>
);
}
}
export default App;
You can't insert a file into an input element programmatically, only the user can do that, so the best way to keep the file in the input would be to set display:none; conditionally on the form instead of removing it from the DOM.
Example
class App extends Component {
// ...
handleFile = e => {
this.setState({ ...this.state, [e.target.name]: e.target.files[0] });
};
render() {
return (
{/* ... */}
<form style={{ display: this.state.pagetwo ? 'block' : 'none' }}>
<label>
<h4>page two</h4>
</label>
<input
type="file"
name="pagetwodata"
value={this.state.pagetwodata}
onChange={this.handleFile}
/>
</form>
{/* ... */}
);
}
}
You can now update the input files value using something like this example:
const fileInput = document.querySelector(`#your-input-file-id`);
const myFile = new File(['Hello World!'], 'myFile.txt', {
type: 'text/plain',
lastModified: new Date(),
});
const dataTransfer = new DataTransfer();
dataTransfer.items.add(myFile);
fileInput.files = dataTransfer.files;