please I need help. I'm using a react-dateTime component, and I am simply trying to get the value of that component just like every other field in a form. But I am unable to get the value of the selected date let alone store it in a state with the other attributes on other fields.
Here is my code:
Datetime component
<Datetime
onChange={this.handleChange}
value={startDate}
timeFormat={true}
name="startDate"
inputProps={{ placeholder: "Start Date" }}
/>
event handler
handleChange = event => {
this.setState({ [event.target.name]: event.target.value });
};
second onchange handler
handleSelectDate = event => {
if (event.target.name === "startDate") {
this.setState({ startDate: event.target.value});
} else {
this.setState({ endDate: event.target.value });
}
}```
The state object
this.state= { startDate: '' }
I have tried different approaches, currently I get an error that event.target is undefined, so there is no event at all, I have also tried to initialize the handler by calling event there onChange
Thanks
It doesn't work like regular input to get its value by name
onChange: Callback trigger when the date changes. The callback receives the selected moment object as only parameter, if the date in the input is valid. If the date in the input is not valid, the callback receives the value of the input (a string). Docs
Try this:
class App extends React.Component {
state = {
startDate: ""
}
// You need to bind "this"
handleChange = this.handleChange.bind(this)
// Receives the selected "moment" object as only parameter
handleChange(date) {
this.setState({ startDate: date })
}
render() {
return (
<div>
<Datetime
value={this.state.startDate}
onChange={this.handleChange}
timeFormat={true}
inputProps={{ placeholder: "Start Date" }}
/>
<hr />
Select date:{" "}
{this.state.startDate ? this.state.startDate.toString() : "no selected date"}
</div>
)
}
}
Check this codeSandbox example.
Although it works, it's kinda outdated and I encourage you to check react-datetime-picker or react-date-picker
Related
I am trying to do on change on datepicker, but the state doesn't update. I am using a state from props. So the date already exists. It shows expired dates. When I am doing the on change, it get stuck at the current date.
Something I am missing in the onChange handler?
constructor(props) {
super(props);
const {export} = this.props;
this.state = {showCalender: false};
this.date = export.expires;
this.handleChange = this.handleChange.bind(this);
}
static getDerivedStateFromProps(props, state) {
if (props.export.expires !== state.expires) {
return {
expires: props.export.expires
};
}
return null;
}
handleChange(date) {
this.setState({
expires: date
}, console.log(this.state.expires));
this.handleClick();
}
handleClick() {
this.setState({showCalender: !this.state.showCalender});
}
handleClear() {
this.setState({expires: ''});
}
render() {
const {expires, showCalender} = this.state;
const expiresDate = format(expires, 'MM/dd/yyyy');
return (
<div>
<FormGroup>
<FormControl
id="date"
value={expiresDate}
onChange={this.handleChange}
onClick={() => this.handleClick()}
title="set date"
aria-label="set date"
/>
<Button className="close-btn" onClick={() => this.handleClear()}>Clear</Button>
</FormGroup>
{ showCalender && (
<FormGroup>
<DatePicker
selected={expires}
onChange={this.handleChange}
inline
/>
</FormGroup>
)}
</div>
);
}
When you update the state you are triggering a re-render, but just before the next render, react is calling the getDerivedStateFromProps which there you are checking to see if the values are different:
static getDerivedStateFromProps(props, state) {
if (props.export.expires !== state.expires) {
return {
expires: props.export.expires
};
}
return null;
}
Which they are, as you just updated the state but the props stayed the same.
And then you update the state again but now you set it back to whatever the value in props is.
From the DOCS:
getDerivedStateFromProps is invoked right before calling the render method, both on the initial mount and on subsequent updates.
I'm not sure why you are trying to sync props and state, but usually this indicates a bad design of your app.
As mentioned in the comments, do not use a variable named export as its a reserved word since ES2015.
You might get an error of:
Unexpected keyword 'export'
I am trying to write a event handle for few input box and I realize that it's not able to update the state of the dict. if I change it to string it works fine.
if I change state to following it works fine.
this.state = {
firstName: "",
lastName: ""
}
However following doesn't
import React, {Component} from "react"
class App extends Component {
constructor() {
super()
this.state = {
list: {
firstName: "",
lastName: ""
}
}
this.handleChange = this.handleChange.bind(this)
}
handleChange(event) {
const {name, value} = event.target
console.log(name)
this.setState({
[name]: value
})
}
render() {
return (
<form>
<input
type="text"
value={this.state.firstName}
name="list[firstName]"
placeholder="First Name"
onChange={this.handleChange}
/>
<br />
<input
type="text"
value={this.state.lastName}
name="list[lastName]"
placeholder="Last Name"
onChange={this.handleChange}
/>
<h1>{this.state.firstName} {this.state.lastName}</h1>
</form>
)
}
}
export default App
First, you're correctly destructuring the name and value props from event.target in your handleChange function, BUT the name properties you set on your two <input> elements are not intuitive. Your name properties are currently "list[firstName]" and "list[lastName]" -> this won't reach into your this.state.list[firstName] / this.state.list[lastName] properties as you wish - instead, you should change your name properties to reflect your state values, like this:
<input
name="firstName"
{/* other props stay the same... */}
/>
<input
name="lastName"
{/* other props stay the same... */}
/>
Now that your <input> elements have name properties that also match values on your state, you can change your handleChange function to something like this:
handleChange(event) {
// get name and value properties from event target
const {name, value} = event.target
this.setState(prevState => ({
// update your 'list' property
list: {
// spread old values into this object so you don't lose any data
...prevState.list,
// update this field's value
[name]: value
}
}))
}
In your handleChange function you can change setState to following:
this.setState({
list: {
[name]: value
}
})
// in input
value={this.state.list.firstName}
The second case does not work because there are flaws. So to make your code run you need to make two changes in your input field
1) name="list[firstName]" as name="firstName"
2) value={this.state.firstName} as value={this.state.list.firstName}
If you use name="list[firstName]" in your input field then whenever [name]: value in handleChange method executes, it evaluates to ['list[firstName]']: value and it will create another property list[firstName] in the state.
i.e state = { list: {...}, list[firstName]: value }.
So it won't update the property firstName inside the list as you expect.
For more detail: Computed Property Names
And using value={this.state.list.firstName} we can map state list.firstName with the input field
<input
type="text"
// do not use value={this.state.firstName}
value={this.state.list.firstName}
// do not use name="list[firstName]"
name="firstName"
placeholder="First Name"
onChange={this.handleChange}
/>
<input
type="text"
value={this.state.list.lastName}
name="lastName"
placeholder="Last Name"
onChange={this.handleChange}
/>
In your handleChange method, your are trying to update the property firstName and lastName inside list.
So to do that first you need to use list inside this.setState method as this.setState({ list: {...}}).
As list is an object and you want to update specific property of list so first you need to copy all properties inside the list using spread operator. And then after that you can change the property you want to change using dynamic / computed property. So change your handleChange method to
handleChange(event) {
const {name, value} = event.target
this.setState({
list: {
// copy all properties inside the "list"
// so that we change only the property
// we need to change and keep other properties as it is
...this.state.list,
// dynamically changing property
[name]: value
}
})
}
I came across the arrow function feature being used as Class property in React component. Looking online I found that it makes code more readable and because of the arrow function features we do not have to bind the handlEvents function inside of constructor.
I still have to use the bind method even while using an arrow function for class property as shown in the code below. When i remove the binding in constructor it shows error in console Warning: A component is changing an uncontrolled input of type text to be controlled. and the form errors do not show up as well
class Contact extends Component {
constructor(props) {
super(props);
this.handleBlur = this.handleBlur(this);
}
handleBlur = evt => field => {
this.setState({
touched: { ...this.state.touched, [field]: true }
});
render() {
return(
<Form onSubmit={this.handleSubmit}>
<FormGroup row>
<Label htmlFor="firstname" md={2}>
First Name
</Label>
<Col md={10}>
<Input
type="text"
id="firstname"
name="firstname"
placeholder="First Name"
valid={errors.firstname === ""}
invalid={errors.firstname !== ""}
value={this.state.firstname}
onBlur={event => {
this.handleBlur("firstname");
}}
onChange={this.handleInputChange}
/>
<FormFeedback>{errors.firstname}</FormFeedback>
</Col>
</FormGroup>
</Form>
)
}
Arrow functions for early bindings in classes are not officially supported by the current ECMAScript.
Using arrow functions as class methods will get you in trouble when your class is inherited and the child wants to override a parent method.
However, I would say it is pretty safe to use them in your react components as you will not get into trouble with inheritance here, since with react you usually will not further inherit from your own components (see Composition vs Inheritance):
At Facebook, we use React in thousands of components, and we haven’t found any use cases where we would recommend creating component inheritance hierarchies.
Dan Abramov is using arrow functions in component methods as well, however he recommends only to use it if early binding is required.
While it’s still experimental, in my experience it solves the problem fairly nicely. It’s not at all React-specific: I find it useful in any classes that deal with asynchrony and callbacks because the binding problem is common for all JavaScript, not just React. We enabled this syntax proposal in the whole Facebook codebase, and if it gets dropped or changes, we’ll make sure to release an automated codemod to migrate to the new syntax (or, worst case, transform it back into bind calls in constructor).
However as Dan notes, to be on the safe site, stick to early binding in constructors:
If you want to stick to the language standard, manual binding in
constructor is the way to go. It’s tedious but usually you only want
to do this for event handlers, and by convention you start them with
handle* in React, so it’s not too hard to remember to bind those.
Update: regarding your case:
In your case you can either use the solution provided by Anshul Bansal where you pass the fieldname into your handleBlur and make use of the field variable in your closure when you pass the returned function as event callback.
Or you can directly acces the input name of the field via the evt.target (code not tested).
handleBlur = evt => {
const field = evt.target.name;
this.setState({
touched: { ...this.state.touched, [field]: true }
});
You need to change the function a little bit as follow.
class Contact extends Component {
constructor(props) {
super(props);
this.handleBlur = this.handleBlur(this);
}
handleBlur = field => () => {
this.setState({
touched: { ...this.state.touched, [field]: true }
});
render() {
return(
<Form onSubmit={this.handleSubmit}>
<FormGroup row>
<Label htmlFor="firstname" md={2}>
First Name
</Label>
<Col md={10}>
<Input
type="text"
id="firstname"
name="firstname"
placeholder="First Name"
valid={errors.firstname === ""}
invalid={errors.firstname !== ""}
value={this.state.firstname}
onBlur={this.handleBlur("firstname")}
onChange={this.handleInputChange}
/>
<FormFeedback>{errors.firstname}</FormFeedback>
</Col>
</FormGroup>
</Form>
)
}
I would not do it with an arrow function, but you can. I will explain the two methods (there are a few more), the first is the one that I use normally.
Binding with a higher order function (or method)
It is simply a method that returns the event callback, as this is a method is already bound to this. This way you can pass any arguments to the method that is a closure, and these arguments will be present in the callback. That is the case of the field argument. Note that I switched the order of the argument, field should be first because it is called first to return the callback.
handleBlur(field) {
return evt => {
console.log(this.state);
this.setState({
touched: { ...this.state.touched,
[field]: true
}
});
};
}
And you can bind it simply with:
onBlur = {this.handleBlur("firstname")}
This has the advantage that you do not need to bind to this in the constructor.
Using an arrow function
The code is similar, but you have to bind to this in the constructor.
handleBlurArrow = field => evt => {
console.log(this.state);
this.setState({
touched: { ...this.state.touched,
[field]: true
}
});
};
Binding:
onBlur = {this.handleBlurArrow("firstnameArrow")}
Bind this on constructor:
this.handleBlurArrow = this.handleBlurArrow.bind(this);
Working example
class Contact extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.handleBlurArrow = this.handleBlurArrow.bind(this);
}
handleBlurArrow = field => evt => {
console.log(this.state);
this.setState({
touched: { ...this.state.touched,
[field]: true
}
});
};
handleBlur(field) {
return evt => {
console.log(this.state);
this.setState({
touched: { ...this.state.touched,
[field]: true
}
});
};
}
render() {
return (<div>
<input type = "text" id = "firstname"
name = "firstname"
placeholder = "First Name"
value = {this.state.firstname}
onBlur = {this.handleBlur("firstname")}
onChange = {this.handleInputChange}
/>
<input type = "text" id = "firstnameArrow"
name = "firstname"
placeholder = "First Name Arrow"
value = {this.state.firstname}
onBlur = {this.handleBlurArrow("firstnameArrow")}
onChange = {this.handleInputChange}
/>
</div>
)
}
}
ReactDOM.render( <Contact /> ,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
So the code below is updating the state of inputValue but for some reason that value is not be passed to the query as the following error is shown:
[GraphQL error]: Message: Variable "$timestamp" of required type "Float!" was not provided., Location: [object Object], Path: undefined
So my question is how do I assign the inputValue to timestamp and pass timestamp to the getObjectsQuery?
class Calendar extends React.Component {
constructor(props) {
super(props);
this.state = {
inputValue: ""
};
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit = event => {
event.preventDefault();
console.log(this.state.inputValue);
this.setState({
inputValue: new Date(document.getElementById("time").value).valueOf()
}); //Parent component contains submit button and there lives state. Submit handler should only set value in state with...setState()- NOT directly
this.props.data.refetch({
//For some reason
timestamp: this.state.inputvalue
});
console.log(this.state.inputValue);
};
render() {
console.log(this.props);
return (
<div className="Calendar">
<form onSubmit={this.handleSubmit.bind(this)}>
<label>Date/Time</label>
<input type="datetime-local" id="time" step="1" />
<input type="submit" value="Submit" />
</form>
</div>
//{this.render(){return (<UserList />)};
);
}
}
export default graphql(getObjectsQuery, {
options: props => ({
variables: {
timestamp: props.inputvalue
}
})
})(Calendar);
I know it's already solved in another place Reactjs/Graphql: TypeError: Object(...) is not a function
Just to remember (as you stil not learned):
handleSubmit = event => {
event.preventDefault();
console.log(this.state.inputValue); // OLD VALUE
this.setState({
inputValue: new Date(document.getElementById("time").value).valueOf()
});
this.props.data.refetch({
//For some reason
timestamp: this.state.inputvalue
// THERE IS STILL OLD VALUE
// because setState work asynchronously
// IT WILL BE UPDATED LATER
});
console.log(this.state.inputValue); // STILL OLD VALUE
};
To use value from event you could simply use its value, not passing it through 'async buffer' (state).
handleSubmit = event => {
event.preventDefault();
console.log(this.state.inputValue); // OLD VALUE
const timestamp = new Date(document.getElementById("time").value).valueOf()
console.log(timestamp); // NEW VALUE
// use new value directly
this.props.data.refetch({
timestamp: +timestamp
// convert to int
});
// save in state - IF NEEDED at all
this.setState({
inputValue: timestamp
});
};
Of course using setState callback is a quite good workaround, too.
Keep in ming that you can have 2 renders - one when state changes and second when data arrives. If storing value in state isn't really required you can avoid one unnecessary rendering.
I have a component called SearchInput and it has in it
<input
type='text'
className='input-field'
value={value}
placeholder={this.state.placeholder}
// onFocus={::this.onFocus}
// onBlur={::this.onBlur}
// onKeyUp={::this.onKeyUp}
// onKeyDown={::this.hanleArrowKeys}
// onChange={::this.onChange}
/>
However, when I type anything into it, nothing happens. The text doesn't even appear. What am I doing wrong?
Probably your state is not updating, maybe didn't you bind "this" to function onChange?
Here is an example of correct input in react:
class SearchInput extends Component {
constructor(props) {
super(props);
this.state = { value: '' };
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(event) {
this.setState({ value: event.target.value });
}
render() {
return <input type="text" value={this.state.value} onChange={this.handleInputChange}/>;
}
}
Probably you are binding the value of the input box with an attribute in the state of the component and you are either not providing an onChange prop to the input tag or your onChange callback method is not updating the attribute in the state to which the input tag's value is bound.