javascript - Pass a Variable Reference In React? - Stack Overflow

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!

• javascript
• reactjs

Share Improve this question Follow asked Jul 28, 2018 at 23:58 Kurt AndersonKurt Anderson 14211 gold badge11 silver badge1010 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

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 3

JavaScript 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