Not Much Going on…
I have not had a lot of time to work on my blog in the last few days, and I have not written much since getting Let’s Encrypt running (without touching it since initial install, still going strong ^_^); so, I thought I would post something and change that.
Firstly, I am working on getting a preferences
thing set up so that I can change simple used-everywhere stuff
(signature and password change for now, but eventually as I add more and more stuff, this page is seems pretty logical).
In building this out, I noticed that there are a lot of Reactisms
to which I am becoming more accustomed.
For a little background, React requires each component to keep track of state using a member variable (called state
…
shocker), and instead of adding listeners to a form, one is supposed to use onChange
function pointers on the elements
themselves. Below is an example of a very simple component:
class _ extends Component {
constructor(props) {
super(props);
this.state = {
foo: ''
};
// This is required for binding `this` correctly... a post for another day
this.fooChanged = this.fooChanged.bind(this);
}
fooChanged(event) {
this.setState({foo: event.target.value});
}
render() {
return(
<input
type="text"
value={this.state.foo}
onChange={this.fooChanged}
/>
);
}
}
This does not seem so complicated, but one can imagine having several inputs on a form
(though, we do not actually
require forms anymore… a post for a different day) causing headaches from all these functions having to be created for
simply wanting to update state. So, instead we can simplify by creating an intuitive mapping:
class _ extends Component {
constructor(props) {
super(props);
this.state = {
foo: '',
bar: ''
};
this.inputChanged= this.inputChanged.bind(this);
}
inputChanged(event) {
let newState = {};
newState[event.target.name] = event.target.value;
// This will still evaluate to `{foo: event.target.value}`
this.setState(newState);
}
render() {
return(
<>
<input
type="text"
name="foo"
value={this.state.foo}
onChange={this.inputChanged}
/>
<input
type="text"
name="bar"
value={this.state.bar}
onChange={this.inputChanged}
/>
</>
);
}
}
There, now we have an onChange
function that works for all the inputs we have, provided we ensure that each has a
name
attribute that corresponds to the same name of the state holding the value for that input.
I have not played with this enough, but I suspect that I can abstract out the inputChanged
function into an abstract
class (well… it is JavaScript, so it will just be a class that one should treat as abstract).