When the form submitted value should be 2.
this.state = { dog: 1 };
this.handleSubmit = this.handleSubmit.bind(this);
handleSubmit(e) {e.preventDefault(); this.setState({dog: 2})}
<Form onSubmit={this.handleSubmit}><Button variant="primary"
type="submit">Submit</Button></Form>
First of all, you should pass props in super()
constructor(props) {
super(props);
this.state = { dog: 1 };
}
Arrow function would solve the issue of this
handleSubmit = (event) => {
event.preventDefault()
this.setState({dog: 2})
}
<Form onSubmit={this.handleSubmit}>
<Button variant="primary" type="submit">Submit</Button>
</Form>
The setting state is asynchronous hence you might not be able to see the changed state just after setting it.
handleSubmit(e) {
e.preventDefault()
this.setState({dog: 2}, ()=>console.log(this.state.dog))
}
It will console 2.
This will help understanding of how setState occurs:
constructor(props) {
super();
this.state = {
dog: 1
};
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(e) {
e.preventDefault()
this.setState({ dog: 2 }, () => {
console.log(this.state.dog)
})
}
render() {
const { dog } = this.state;
return (
<>
<span>Dog Value : {dog}</span>
<form onSubmit={this.handleSubmit}>
<button variant="primary" type="submit">Submit</button>
</form>
</>
)
}
class App extends Component {
constructor(props) {
super();
this.state = { dog: 1 };
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(e) {
e.preventDefault();
this.setState({ dog: 2 });
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<button> Submit</button>
<p>{this.state.dog}</p>
</form>
);
}
}
This works just fine. What is Form ? Did you mean form?
Using your code you could try adding handleSubmit to the button's onClick to see if your state updates.
Related
I am unable to print the Input-
Problem- I give an input and click on the button. I want the input to be visible in the next line.
react
import React from 'react';
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
event.preventDefault()
this.setState({value: event.target.value})
}
render() {
return (
<div>
<form onSubmit= {this.handleChange}>
<input type="text"/>
<button>Submit</button>
</form>
<h1>{this.state.value}</h1>
</div>
)
}
}
export default NameForm;
Your passing change handler to submit, this won't work.
You have to keep track of the inputs with state the way I did or you can use Refs to get the values of the inputs.
Your issue could be solved like this
import React from "react";
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = { value: "", show: false };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
//keep track of input changes
this.setState({ value: event.target.value });
}
handleSubmit(event) {
event.preventDefault();
this.setState({ show: true });
// handle form submission here
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<input onChange={this.handleChange} type="text" />
<button>Submit</button>
</form>
{this.state.show ? (
<div>
<h1>{this.state.value}</h1>
</div>
) : null}
</div>
);
}
}
export default NameForm;
I'm trying to do a react app where you have a "login" screen (just add a username to go in).
I have used this tutorial to do what I want(basically after submitting a username, it should change the component rendering)
My problem is that each time I click the submit button and the main component re-renders it will change the state of the main component back to default. The result is that it will show the Game component, which is a generic one, for a split second then go back to rendering the login component. What am I doing wrong?
Main component:
class Main extends React.Component {
constructor(props){
super(props);
this.login = this.login.bind(this);
this.state = {
loggedIn : false
};
}
login() {
this.setState({loggedIn: true});
}
render() {
const isLoggedIn = this.state.loggedIn;
return (
<div>
{isLoggedIn
? <Game/>
: <Login login={this.login}/>}
</div>
);
}
}
The login component:
class Login extends React.Component {
constructor(props) {
console.log("HELLO")
super(props);
this.state = {
value: '',
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
event.preventDefault();
}
handleSubmit(event) {
// login/" + this.state.value
fetch("my.api.example")
.then(res => res.json())
.then(
(result) => {
this.onLogin();
},
(error) => {
console.log(error)
}
)
}
onLogin = () => {
this.props.login();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
Your handleSubmit doesn't have an event.preventDefault() so the form is submitting and refreshing the page.
I am trying to update state in react only after form is submitted. I have one html form which has 1 text input and a submit button, but it takes 2 click of submit button to actually change the state in react. I am using 2 methods handleSubmit and handleChange.
handleChange look for changes in input field and update the state accordingly.
handleSubmit append the state updated by handleChange to array on form submission
and state contains { itemslist: [], currentitem: "" }
when 1st time submit button is clicked it gives previous value of item (or gives empty array) and at 2nd time it gives array with value present in input field.
below is my full code
import React from 'react';
class App extends React.Component{
constructor(){
super()
this.state = {
currentitem: '',
itemslist: []
}
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
handleSubmit(event){
event.preventDefault();
this.setState((prevState) => {
return{
itemslist: prevState.itemslist.concat([this.state.currentitem])
}
})
console.log(this.state.items)
}
handleChange(event){
const {name, value} = event.target
this.setState({ [name] : value })
console.log(this.state.currentitem)
}
render(){
return(
<div>
<form onSubmit={this.handleSubmit} >
<input type='text' placeholder='enter text' name='currentitem' onChange={this.handleChange} value={this.state.currentitem} />
<button type='submit'>Submit</button>
</form>
</div>
)
}
}
export default App;
This answer could be a bit different of your code but this way it will work. Set the button type to button and make the button handle the submit, not the form. Then change the handleSubmit function to what I've got. I've tried it and it does works!:
import React from 'react';
class App extends React.Component{
constructor(){
super()
this.state = {
currentitem: '',
itemslist: []
}
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
handleSubmit(e){
e.preventDefault();
const { currentitem, itemslist } = this.state;
const newArray = [
...itemslist,
currentitem
];
this.setState({ itemslist, newArray });
}
handleChange(event){
const {name, value} = event.target
this.setState({ [name] : value })
console.log(this.state.currentitem)
}
render(){
return(
<div>
<form>
<input type='text' placeholder='enter text' name='currentitem' onChange={this.handleChange} value={this.state.currentitem} />
<button type='button' onClick={this.handleSubmit}>Submit</button>
</form>
// In cas eyou want to see the values in the array+
{
this.state.itemsList.map((item) => <p>{item}</>)
}
</div>
)
}
}
export default App;
setState function is asynchronous in react, so you cannot get the updated value immediately. But if you need to get the recent updated value from state, you must use callback function of setState.
this.setState({items: newItems}, () => { console.log(); })
I have modified your example like below to fulfil your requirement.
import React from 'react';
class App extends React.Component {
constructor() {
super();
this.state = {
currentitem: '',
items: []
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
event.preventDefault();
this.setState((prevState) => {
return {
items: prevState.items.concat([this.state.currentitem])
}
}, () => {
console.log(this.state.items)
});
}
handleChange(event) {
const {name, value} = event.target;
this.setState({[name]: value});
console.log(this.state.currentitem);
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<input type='text' placeholder='enter text' name='currentitem' onChange={this.handleChange}
value={this.state.currentitem}/>
<button type='submit'>Submit</button>
</form>
</div>
)
}
}
export default App;
I have a class component as follows:
class App extends Component {
constructor(props){
super(props);
this.state = {
abc: '',
someQuery: ''
}
this.handleSubmit = this.handleSubmit.bind(this);
this.handleChange = this.handleChange.bind(this);
}
componentDidUpdate(){
fetch(`/someLink/${this.state.abc}`)
.then(response => {
return response.json();
}).then(data => {
this.setState({
someQuery: data.xxx
});
});
}
handleSubmit(e){
const target = e.target;
const value = target.value;
this.setState({
abc: value
})
e.preventDefault();
};
handleChange(e){
const target = e.target;
const value = target.value;
this.setState({
abc: value
});
};
render(){
return(
<form onSubmit={this.handleSubmit}>
<input name='abc' value={this.state.abc} onChange={this.handleChange} />
<input type="submit" value="Submit" />
</form>
<div>{this.state.abc} is currently accessing data from {this.state.someQuery}</div>
)
}
}
How do I run componentDidUpdate() every time I update the value of an input field and clicking the submit button?
The above invokes the life-cycle but due to the setState within handleChange() too, the life-cycle is invoked the moment I type something and doesn't wait till the submit button is clicked.
Removing the setState from handleChange() makes the input field value not editable anymore (cant type on the input field).
I need the input field value appended to the api link in the life-cycle but I can't seem to figure out the right way to do this.
You can add any method in component class and call it on submit. componentDidUpdate is not right place to do such thing especially setting state is crime :D
class App extends Component {
constructor(props){
super(props);
this.state = {
abc: '',
someQuery: ''
}
this.handleSubmit = this.handleSubmit.bind(this);
this.handleChange = this.handleChange.bind(this);
}
doSommething (value){
fetch(`/someLink/${value}`)
.then(response => {
return response.json();
}).then(data => {
this.setState({
someQuery: data.xxx
});
});
}
handleSubmit(e){
const target = e.target;
const value = target.value;
this.setState({
abc: value
})
e.preventDefault();
doSommething(value);
};
handleChange(e){
const target = e.target;
const value = target.value;
this.setState({
abc: value
});
};
render(){
return(
<form onSubmit={this.handleSubmit}>
<input name='abc' value={this.state.abc} onChange={this.handleChange} />
<input type="submit" value="Submit" />
</form>
<div>{this.state.abc} is currently accessing data from {this.state.someQuery}</div>
)
}
}
I have the following component in React:
class LoginForm extends React.Component {
constructor(props) {
super(props);
this.state = {username: '', password: '', redirectToReferrer: false};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
const value = event.target.value;
const name = event.target.name;
this.setState({
[name]: value
});
}
handleSubmit(event) {
event.preventDefault();
console.log('A name was submitted: ' + this.state.username);
Auth.authenticate(this.state.username, this.state.password, () => {
this.setState({ redirectToReferrer: true })
})
}
render() {
const { from } = this.props.location.state || { from: { pathname: '/' } }
const { redirectToReferrer } = this.state
if (redirectToReferrer) {
return (
<Redirect to={from}/>
)
}
return (
<div>
<p>You must log in to view the page at {from.pathname}</p>
<form id='loginForm'>
<input type="text" name="username" onChange={this.handleChange} />
<input type="password" name="password" onChange={this.handleChange} />
<button onClick={this.handleSubmit}>Log in</button>
</form>
</div>
)
}
}
When I use the browser auto-complete feature (instead of typing 'admin' I type just 'a' and let browser to fill the rest) the component's state is not update and it submits incorrect value. When I type the username/password all by hand it works correctly. How can I fix this? It's pretty common use case...
It looks like that some browsers have a bug.
You can try to workaround it with Autofill polyfill:
A polyfill to fire a change event when the browser auto fills form fields