admin管理员组文章数量:1325761
I am designing a react ponent, and am trying to reduce the codebase and remove code duplication.
One thing that has a lot of code duplication is the checking input in the setter variables. Much of these setters do the same checking before they actually set the variable. Now, I know I could abstract that checking to a function to reduce duplication. But I was wondering, is there anyway to take it a step further, and reduce it all down to a single function?
For Example:
setVariable1(e){
// Input validation
// Rewrite Variable1
}
setVariable2(e){
// Input Validation
// Rewrite Variable2
}
<input onChange={this.setVariable1} type="number" value={this.variable2} className="form-control" required/>
<input onChange={this.setVariable2} type="number" value={this.variable2} className="form-control" required/>
Now if I used an arrow function, or perhaps currying to pass the variable into the function. Would there be a way to pass the reference of the variable in, instead of the value? Sort of like how you can add the & in C to affect the address?
setVariableType1(e, var){
// Input Validation
// Set variable var
}
<input onChange={(e) => this.setVariableType1(this.variable1)} type="number" value={this.variable2} className="form-control" required/>
<input onChange={(e) => this.setVariableType1(this.variable2} type="number" value={this.variable2} className="form-control" required/>
However, I notice when I do it this way. Instead of passing the variable into the function, I just pass the variable's contents in. So is there a way to pass in the reference?
I am decently new to React and still learning the ins and outs, so maybe there is a pletely different way to do this using the ponent hierarchy with props and states etc? I just can't seem to figure out the best way to do this, or even if it's proper to want to do this.
Any help would be appreciated, thanks!
I am designing a react ponent, and am trying to reduce the codebase and remove code duplication.
One thing that has a lot of code duplication is the checking input in the setter variables. Much of these setters do the same checking before they actually set the variable. Now, I know I could abstract that checking to a function to reduce duplication. But I was wondering, is there anyway to take it a step further, and reduce it all down to a single function?
For Example:
setVariable1(e){
// Input validation
// Rewrite Variable1
}
setVariable2(e){
// Input Validation
// Rewrite Variable2
}
<input onChange={this.setVariable1} type="number" value={this.variable2} className="form-control" required/>
<input onChange={this.setVariable2} type="number" value={this.variable2} className="form-control" required/>
Now if I used an arrow function, or perhaps currying to pass the variable into the function. Would there be a way to pass the reference of the variable in, instead of the value? Sort of like how you can add the & in C to affect the address?
setVariableType1(e, var){
// Input Validation
// Set variable var
}
<input onChange={(e) => this.setVariableType1(this.variable1)} type="number" value={this.variable2} className="form-control" required/>
<input onChange={(e) => this.setVariableType1(this.variable2} type="number" value={this.variable2} className="form-control" required/>
However, I notice when I do it this way. Instead of passing the variable into the function, I just pass the variable's contents in. So is there a way to pass in the reference?
I am decently new to React and still learning the ins and outs, so maybe there is a pletely different way to do this using the ponent hierarchy with props and states etc? I just can't seem to figure out the best way to do this, or even if it's proper to want to do this.
Any help would be appreciated, thanks!
Share Improve this question asked Jul 28, 2018 at 23:58 Kurt AndersonKurt Anderson 1421 gold badge1 silver badge10 bronze badges 6- 1 JavaScript is always pass by value. Why aren't you setting state? – Andrew Li Commented Jul 29, 2018 at 0:04
- 1 Primitives are passed by value. Non primitive variables are passed by reference. – Akrion Commented Jul 29, 2018 at 0:05
- 2 @Akrion Not correct; all values are passed by value. The value of variables pointing to objects is a reference to that object. – user229044 ♦ Commented Jul 29, 2018 at 0:07
- @Li357 If I use states, wouldn't there still be the same problem? It would require a new function for each input state set? – Kurt Anderson Commented Jul 29, 2018 at 0:08
- @KurtAnderson You could pass in the state key. – Andrew Li Commented Jul 29, 2018 at 0:09
2 Answers
Reset to default 3JavaScript is always pass by value (though for objects, their values are their references). What I'd do in this case is set state based on passed keys. So, something like this (assuming the use of class properties):
class Example extends React.Component {
state = {
email: '',
password: '',
}
setInput = (key) => (event) => {
this.setState({ [key]: event.target.value });
}
render() {
return (
<div>
<input value={this.state.email} onChange={this.setInput('email')} />
<input value={this.state.password} onChange={this.setInput('password')} />
</div>
);
}
}
Here, setInput
is a curried function. So, you can specify a certain key in state you want to change, then it returns a handler for that specific key using puted properties.
Just a different approach with name
attribute. Also, it uses setInput
function with reference. With this method, it is not recreated in each render.
class App extends React.Component {
state = {
foo: "",
bar: "",
}
setInput = e =>
this.setState({
[e.target.name]: e.target.value
});
render() {
return (
<div>
Foo: <input name="foo" onChange={this.setInput} />
<br />
Bar: <input name="bar" onChange={this.setInput} />
<p>Foo is: {this.state.foo}</p>
<p>Bar is: {this.state.bar}</p>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
本文标签: javascriptPass a Variable Reference In ReactStack Overflow
版权声明:本文标题:javascript - Pass a Variable Reference In React? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742191804a2430354.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论