Question

我正在设计一个React组件，并试图减少代码库并消除代码重复。

具有大量代码重复的一件事是setter变量中的检查输入。这些设置器中有许多在实际设置变量之前都会进行相同的检查。现在，我知道我可以抽象该检查功能以减少重复。但是我想知道，是否还有进一步的措施，并将其缩减为一个功能？

例如：

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/>

现在，如果我使用了箭头函数，或者也许是急于将变量传递给函数。是否有一种方法可以传递变量的引用而不是值？有点像如何在＆中添加＆以影响地址？

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/>

但是，我注意到以这种方式执行操作的时间。我没有传递变量到函数中，而是传递了变量的内容。那么有没有办法传递引用？

我是React的新手，仍然在学习它的来龙去脉，所以也许可以使用一种完全不同的方法来使用带有道具和状态等的组件层次结构？我似乎无法找出执行此操作的最佳方法，或者即使这样做是适当的。

任何帮助将不胜感激，谢谢！

Answer 1

JavaScript总是按值传递（尽管对于对象，它们的值是它们的引用）。在这种情况下，我要做的是基于传递的键来设置状态。因此，如下所示（假设使用类属性）：

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>
    );
  }
}

在这里，setInput是咖喱函数。因此，您可以指定要更改状态的特定键，然后使用计算出的属性返回该特定键的处理程序。

Answer 2

具有name属性的另一种方法。此外，它还使用setInput函数作为参考。使用此方法，不会在每个渲染器中重新创建它。

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.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

在React中传递变量引用？

2 个答案: