In my SPFX project using React, TypeScript, and Office UI Fabric, I've noticed that I'm creating separate functions for each text field in a form. Is there a way to create a single function that can handle multiple similar fields, but still maintain unique states for each?
For example, here is one text field function:
private _onReason = (ev: React.FormEvent<HTMLInputElement>, newValue?: string) => {
this.setState({
Reason: newValue
});
}
And here is another almost identical one:
private _onPurpose = (ev: React.FormEvent<HTMLInputElement>, newValue?: string) => {
this.setState({
Purpose: newValue
});
}
I want users to be able to submit the states of these multiple text fields with more concise code.
I came across this resource but I'm not sure how to integrate it into my project:
The issue I encountered when trying to implement the solution from Pluralsight is related to using MS fabric UI and the
React.FormEvent<HTMLInputElement>, NewValue?: string)public handleChange (evt: React.FormEvent<HTMLInputElement>, newValue?: string) {
const value = evt.target.value;
this.setState({
...this.state,
[evt.target.name]: value
});
}
The error occurs at const value and [evt.target.name], specifically.
UPDATE: I tried implementing something suggested in Peter's link, which helped resolve one error (the value error), but I'm still facing issues with [evt.target.name] (specifically, the 'name' portion).