[英]React JS event handler arguments
我正在阅读React JS文档中的“提升状态” ,并且我不太清楚。 可以在这里找到codepen: https ://codepen.io/valscion/pen/jBNjja?editors = 0010
在TemperatureInput组件中,onTemperatureChange事件处理程序调用handleCelsiusChange,但后者包含一个temperature参数。 我们如何传递这个参数? onTemperatureChange中没有传递参数。 我在这里错过了什么?
希望有人能帮我理解这一点。
class TemperatureInput extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
this.props.onTemperatureChange(e.target.value);
}
render() {
const temperature = this.props.temperature;
const scale = this.props.scale;
return (
<fieldset>
<legend>Enter temperature in {scaleNames[scale]}:</legend>
<input value={temperature}
onChange={this.handleChange} />
</fieldset>
);
}
}
class Calculator extends React.Component {
constructor(props) {
super(props);
this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
this.state = {temperature: '', scale: 'c'};
}
handleCelsiusChange(temperature) {
this.setState({scale: 'c', temperature});
}
handleFahrenheitChange(temperature) {
this.setState({scale: 'f', temperature});
}
render() {
const scale = this.state.scale;
const temperature = this.state.temperature;
const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;
return (
<div>
<TemperatureInput
scale="c"
temperature={celsius}
onTemperatureChange={this.handleCelsiusChange} />
<TemperatureInput
scale="f"
temperature={fahrenheit}
onTemperatureChange={this.handleFahrenheitChange} />
<BoilingVerdict
celsius={parseFloat(celsius)} />
</div>
);
}
}
这里是您传递函数的TemperatureInput组件(它就像一个指针)。
这是从Calculator传递给TemperatureInput组件。
现在我们看到,我们的函数handleCelsiusChange需要一个参数,因此当我们在TemperatureInput组件中调用onTemperatureChange函数时,我们必须在那里传递一些变量。
正如您在下面的代码中看到的那样,您将参数传递给函数调用。
handleChange(e) {
this.props.onTemperatureChange(e.target.value);
}
这是我们将参数从TemperatureInput组件传递给函数的地方
在TemperatureInput组件中,onTemperatureChange事件处理程序调用handleCelsiusChange ...
这个假设是不正确的。 您传递给函数对象的引用this.handleCelsiusChange
的属性onTemperatureChange
在render
功能。
然后通过在TemperatureInput
类中调用它来使用此函数对象。
this.props.onTemperatureChange(e.target.value)
如果要在JSX中调用handleCelciusChange, render
将如下所示:
<TemperatureInput
scale="c"
temperature={celsius}
onTemperatureChange={this.handleCelsiusChange(some_value)} />
我们先来看看TemperatureInput组件。 当其input元素触发change事件时,它由handleChange(e)
处理(在TemperatureInput组件中声明)。 您会注意到它然后使用参数e.target.value
调用this.props.onTemperatureChange
(这是input元素的value属性)。
this.props.onTemperatureChange
来自哪里? 它由实例化它的父组件Calculator设置。 查看Calculator组件的render方法,您会注意到每个TemperatureInput实例的onTemperatureChange
prop都设置为this.handle[Cel/Far]Change
(在Calculator组件中声明的两个方法)。
因此,当TemperatureInput组件调用this.props.onTemperatureChange
,它实际上调用了Calculator组件的handle[Cel/Far]Change
方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.