what is the equivelant of this code in class componet? I am able to write this only in react hook (functional component)
setState({ ...allValues, [e.target.name]: e.target.value });
I am able to multiple values passed from multiple forms to this setDataState in functional componet I want the same in class componet but this syntax is not working
currently, I have it written like this. This changes every text field that has changehandler
changeHandler = (e) => {
this.setState({ allValues: e.target.value });
};
entire code
import React from "react";
import moment from "moment";
import axios from "axios";
export default class Addmedicine extends React.Component {
constructor(props) {
super(props);
this.state = { isDone: true, allValues: "" };
this.medicineClose = this.medicineClose.bind(this);
}
medicineClose() {
this.setState({ isDone: false });
}
changeHandler = (e) => {
this.setState({ allValues: e.target.value });
};
submitValue = (e) => {
e.preventDefault();
const formData = new FormData(e.currentTarget);
var object = {};
formData.forEach(function (value, key) {
object[key] = value;
});
var json = JSON.stringify(object);
formData.append("data", json);
const headers = {
Authorization: `token ` localStorage.getItem("token"),
};
axios
.post(
"posturl",
formData,
{
headers: headers,
}
)
.then(() => {
alert("Medicine was submitted");
})
.catch((error) => {
alert("Cannot add Medicine again");
});
};
render() {
return (
<>
{this.state.isDone ? (
<div style={styles.module}>
<h2 style={{ margin: "0px" }}>Add New Medicine</h2>
<hr style={{ color: "#fff" }} />
<form onSubmit={this.submitValue}>
<table
style={{ borderCollapse: "seperate", borderSpacing: "0em 1em" }}
>
<tr style={styles.tr}>
<td style={styles.tdstyle}>Morning Before Food</td>
<td style={styles.tdstyle}>
<input
type="text"
name="medicationTime"
style={styles.label}
onChange={this.changeHandler}
defaultValue="morning before food"
hidden
/>
<input
type="text"
name="name"
style={styles.label}
onChange={this.changeHandler}
value={this.state.allValues}
/>
</td>
<td style={styles.tdstyle}>
<button type="submit">Add</button>
</td>
</tr>
</table>
</form>
<form onSubmit={this.submitValue}>
<table
style={{ borderCollapse: "seperate", borderSpacing: "0em 1em" }}
>
<tr style={styles.tr}>
<td style={styles.tdstyle}>Morning After Food</td>
<td style={styles.tdstyle}>
<input
type="text"
name="medicationTime"
style={styles.label}
onChange={this.changeHandler}
defaultValue="morning after food"
hidden
/>
<input
type="text"
name="name"
style={styles.label}
onChange={this.changeHandler}
value={this.state.allValues}
/>
</td>
<td style={styles.tdstyle}>
<button type="submit">Add</button>
</td>
</tr>
</table>
</form>
<form onSubmit={this.submitValue}>
<table
style={{ borderCollapse: "seperate", borderSpacing: "0em 1em" }}
>
<tr style={styles.tr}>
<td style={styles.tdstyle}>Afternoon Before Food</td>
<td style={styles.tdstyle}>
<input
type="text"
name="medicationTime"
style={styles.label}
onChange={this.changeHandler}
defaultValue="afternoon before food"
hidden
/>
<input
type="text"
name="name"
style={styles.label}
onChange={this.changeHandler}
value={this.state.allValues}
/>
</td>
<td style={styles.tdstyle}>
<button type="submit">Add</button>
</td>
</tr>
</table>
</form>
<form onSubmit={this.submitValue}>
<table
style={{ borderCollapse: "seperate", borderSpacing: "0em 1em" }}
>
<tr style={styles.tr}>
<td style={styles.tdstyle}>Afternoon After Food</td>
<td style={styles.tdstyle}>
<input
type="text"
name="medicationTime"
style={styles.label}
onChange={this.changeHandler}
defaultValue="afternoon after aood"
hidden
/>
<input
type="text"
name="name"
style={styles.label}
onChange={this.changeHandler}
value={this.state.allValues}
/>
</td>
<td style={styles.tdstyle}>
<button type="submit">Add</button>
</td>
</tr>
</table>
</form>
<form onSubmit={this.submitValue}>
<table
style={{ borderCollapse: "seperate", borderSpacing: "0em 1em" }}
>
<tr style={styles.tr}>
<td style={styles.tdstyle}>Night Before Food</td>
<td style={styles.tdstyle}>
<input
type="text"
name="medicationTime"
style={styles.label}
onChange={this.changeHandler}
defaultValue="night before food"
hidden
/>
<input
type="text"
name="name"
style={styles.label}
onChange={this.changeHandler}
value={this.state.allValues}
/>
</td>
<td style={styles.tdstyle}>
<button type="submit">Add</button>
</td>
</tr>
</table>
</form>
<form onSubmit={this.submitValue}>
<table
style={{ borderCollapse: "seperate", borderSpacing: "0em 1em" }}
>
<tr style={styles.tr}>
<td style={styles.tdstyle}>Night After Food</td>
<td style={styles.tdstyle}>
<input
type="text"
name="medicationTime"
style={styles.label}
onChange={this.changeHandler}
defaultValue="night after food"
hidden
/>
<input
type="text"
name="name"
style={styles.label}
onChange={this.changeHandler}
value={this.state.allValues}
/>
</td>
<td style={styles.tdstyle}>
<button type="submit">Add</button>
</td>
</tr>
</table>
</form>
CodePudding user response：
I think you are looking for this
this.setState({ ...this.state, [e.target.name]: e.target.value });
CodePudding user response：
changeHandler = (e) => {
this.setState({ allValues: e.target.value });
};
This will save all updates to this.state.allValues property, which likely isn't what you are after if you are trying to use dynamic state updates.
The syntax will be very similar to the function component state update with a minor difference, class component's setState handles the shallow merging of the root state properties so you don't need to manage this manually yourself (only more deeply nested state would need to be shallow copied).
changeHandler = (e) => {
const { name, value } = e.target;
this.setState({
[name]: value
});
}