I want to create a form and save some values.
I have this constructor code :
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);}
and have handleChange function:
handleChange(event) {
this.setState({value: event.target.value});}
and have handleSubmit function:
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();}
the handleSubmit function there is error :
Property 'value' does not exist on type '{}'.ts(2339).
How to slove it ?
Here is full code:
class NameForm extends React.Component {
constructor(props) {
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});
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
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>
);
}
}
This is the error
Since you are using typescript you need to do something like this. Have a look at this stackBlitz
https://stackblitz.com/edit/react-ts-gfcdog
import React from "react";
interface State{
value? : string
}
export default class NameForm extends React.Component<{},State> {
constructor(props: any) {
super(props);
this.state = { value: "" };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event: any) {
this.setState({ value: event.target.value });
}
handleSubmit(event: any) {
alert("A name was submitted: " + this.state.value);
event.preventDefault();
}
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>
);
}
}
Related
I am new to React and I am trying to make a form I wrote this simple form
class Profile extends React.Component {
constructor(props) {
super(props);
this.state = {name: '', age:''};
this.handleNameChange = this.handleNameChange.bind(this);
this.handleAgeChange = this.handleAgeChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleNameChange(event) {
this.setState({name: event.target.name});
}
handleAgeChange(event) {
this.setState({age: event.target.age});
}
handleSubmit(event) {
alert('Name was submitted: ' + this.state.value);
alert('Age was submitted: '+ this.state.age);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.name} onChange={this.handleNameChange} />
</label>
<label>
Age:
<input type="text" value={this.state.age} onChange={this.handleAgeChange}/>
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
export default Profile;
When I try it I can't write anything in the Name and the alert always shows me 'Name was submitted: undefined' 'Age was submitted: undefined'
You have a few typos in your code. For each of your handleChange functions, you should have event.target.value for the state value being set instead of the names of the fields.
Also in your alert function for the name, the value should be this.state.name instead of this.state.value.
Here is a complete working version:
class Profile extends React.Component {
constructor(props) {
super(props);
this.state = { name: "", age: "" };
this.handleNameChange = this.handleNameChange.bind(this);
this.handleAgeChange = this.handleAgeChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleNameChange(event) {
this.setState({ name: event.target.value });
}
handleAgeChange(event) {
this.setState({ age: event.target.value });
}
handleSubmit(event) {
alert("Name was submitted: " + this.state.name);
alert("Age was submitted: " + this.state.age);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input
type="text"
value={this.state.name}
onChange={this.handleNameChange}
/>
</label>
<label>
Age:
<input
type="text"
value={this.state.age}
onChange={this.handleAgeChange}
/>
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
ReactDOM.render(
<Profile / > ,
document.body
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
I currently have a form and I'm struggling to detect if the user has inputted.
The scenario is that after inputting the form, the user cancels and a modal will appear that asks if they want to proceed without changing.
const [name, setName] = useState('')
My code for triggering the modal
if (!name){
showModal()
}
Right now I'm having trouble detecting if form has been filled.
you can use "onChange" event to detect input element changes in the form.
class NameForm extends React.Component {
constructor(props) {
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});
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
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>
);
}
}
Example From: https://reactjs.org/docs/forms.html
I am learning react. I have created a form and on submit I want to render another(Info here) component and I am unable to do so.here is my code example.
App.js
class App extends React.Component {
constructor(props) {
super(props)
this.state = { username: '' }
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
handleChange(event) {
this.setState({ value: event.target.value })
}
handleSubmit(event) {
alert(this.state.username)
event.preventDefault()
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<input
type="text"
value={this.state.username}
onChange={this.handleChange}
/>
<button type="button" class ="button" value="Info" onClick={this.handleSubmit} component = {Summary}>Summary</button>
</form>
)
}
}
Info.js
class Info extends React.Component{
{more logic and code for this component}
render(){
return (<h1>Welcome To Info</h1>)
}
}
export default Info
You can do it this way
class App extends React.Component {
constructor(props) {
super(props)
this.state = { username: '', showInfo: false }
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
handleChange(event) {
this.setState({ value: event.target.value })
}
handleSubmit(event) {
alert(this.state.username)
event.preventDefault()
this.setState({showInfo: true});
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<input
type="text"
value={this.state.username}
onChange={this.handleChange}
/>
<button type="button" class ="button" value="Info" onClick={this.handleSubmit} component = {Summary}>Summary</button>
</form>
{this.state.showInfo ? <Info /> : null}
</div>
)
}
}
function Info(props){
return <h3>{props.username}</h3>
}
class App extends React.Component {
constructor(props) {
super(props)
this.state = { username: '' }
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
handleChange =(event)=> {
this.setState({ username: event.target.value })
}
handleSubmit(event) {
alert(this.state.username)
event.preventDefault()
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<input
type="text"
value={this.state.username}
onChange={this.handleChange}
/>
<button type="button" class ="button" value="Info"
onClick={this.handleSubmit}>Summary</button>
</form>
<Info {...this.state}/>
</div>
)
}
}
Given a react controlled component like the following from the react docs:
class NameForm extends React.Component {
constructor(props) {
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});
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
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>
);
}
}
What is the right way to change NameForm's state.value from NameForm's parent component? In my specific use case, the user can type in the text input or the user can click some buttons in the parent that are meant to change the value of the input in the child component.
Edit: I should add that I m new to react so I may be overlooking the obvious.
I am fairly new to React coming from a JS & Java background. I am still understanding react state properties and have two code samples, one which compiles and one which does not. In the first, I establish the class' state as having one variable str and I work with this variable. This code does not work. In the second, the variable is named value, and it works. Is it not possible to have a variable under a different name or more than one variable in react? Thank you!!
Side Note: The term "works" in this context is the difference between being able to type into the text field or not.
Form Code (Works):
class SomeOtherForm extends React.Component {
constructor(props) {
super(props);
this.state = {
str: '',
};
this.handleSubmit = this.handleSubmit.bind(this);
}
handleValueChanged(event) {
this.setState({str: event.target.value});
}
handleSubmit(event) {
alert('Y.. ' + this.state.str);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type='text' value={this.state.str} onChange={this.handleChange}/>
</label>
<input type='submit' value='Submit'/>
</form>
);
}
}
Form Code (Doesn't Work):
class NameForm extends React.Component {
constructor(props) {
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});
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
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>
);
}
}
In SomeOtherForm there are a few mishaps:
You're calling this.handleChange for the onChange event, but this method doesn't exist (it needs to be changed from handleValueChanged to handleChange)
You haven't bound both handlers to the constructor (you need to add this.handleChange = this.handleChange.bind(this);)
Fixed:
class SomeOtherForm extends React.Component {
constructor(props) {
super(props)
this.state = { str: '' }
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
handleChange(event) {
this.setState({
str: event.target.value
})
}
handleSubmit(event) {
event.preventDefault()
alert(`Yo shit isssss.. ${this.state.str}`)
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input
type='text'
value={this.state.str}
onChange={this.handleChange} />
</label>
<input
type='submit'
value='Submit'/>
</form>
)
}
}
In the first example you named the function handleValueChanged NOT handleChange...
This will fix your problem:
<input type='text' value={this.state.str} onChange={this.handleValueChanged}/>
As a side note state in react is an objectand thats it. So referring to state like this
I establish the class' state as having one variable str and I work
with this variable
Isnt actually technically accurate and makes things sound more confusing than they are.
It's totally possible manage different variables in state.
constructor (props) {
super(props)
this.state = {
name: '',
lastname: ''
}
this.handleSubmit = this.handleSubmit.bind(this)
this.handleChange = this.handleChange.bind(this)
}
handleSubmit (event) {
event.preventDefault()
console.log(this.state)
}
handleChange (event) {
const { name, value } = event.target
this.setState({
[name]: value
})
}
render () {
<form onSubmit={this.handleSubmit}>
<input
name='name'
value={this.state.name}
onChange={this.handleChange}
/>
<input
name='lastname'
value={this.state.lastname}
onChange={this.handleChange}
/>
</form>
}
Pay attention to the name of the inputs they should be the same as the variables in your state.