gpt4 book ai didi

javascript - 在 React 中传递变量引用?

转载 作者:行者123 更新时间:2023-11-29 17:43:36 25 4
gpt4 key购买 nike

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

有很多代码重复的一件事是检查 setter 变量中的输入。这些 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/>

现在,如果我使用箭头函数,或者也许柯里化(Currying)将变量传递给函数。有没有办法传递变量的引用而不是值?有点像如何在 C 中添加 & 来影响地址?

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 的新手,仍在学习来龙去脉,所以也许有一种完全不同的方法可以使用带有 props 和 states 等的组件层次结构来做到这一点?我似乎无法找出最好的方法来做到这一点,或者即使这样做是合适的。

任何帮助将不胜感激,谢谢!

最佳答案

JavaScript 始终按值传递(尽管对于对象,它们的值是它们的引用)。在这种情况下,我要做的是根据传递的 key 设置状态。所以,像这样(假设使用类属性):

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 是一个柯里化(Currying)函数。因此,您可以在要更改的状态中指定某个键,然后它使用计算属性返回该特定键的处理程序。

关于javascript - 在 React 中传递变量引用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51576155/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com