我想将箭头样式函数(at onChange)] >>转换为普通函数。我是一个初学者,对我来说,同时查看两个版本会很有帮助,因为我很难理解新箭头函数语法。
应该有可能,但是使用“普通”功能,下面的样子如何?
import React from "react";
function Input1(props) {
//console.log(props)
return (
<div>
<input
onChange={event => props.handleChange("email", event.target.value)}
/>
</div>
);
}
export default Input1;
我想将此React组件中的箭头样式函数(在onChange处)更改为普通函数。我是一个初学者,对我来说,同时查看两个版本会很有帮助,因为我的工作很辛苦...
import React from "react";
function Input1(props) {
//console.log(props)
function onChange(event) {
props.handleChange("email", event.target.value)
}
return (
<div>
<input
onChange={onChange}
/>
</div>
);
}
export default Input1;
<div>
<input
onChange={function(event) {
props.handleChange("email", event.target.value)
}
}
/>
</div>
import React from "react";
function Input1(props) {
function changeHandler(event) {
props.handleChange("email", event.target.value)
}
//console.log(props)
return (
<div>
<input
onChange={changeHandler}
/>
</div>
);
}
export default Input1;
import React from "react";
class Input1 extends React.Component {
constructor(props) {
super(props);
//need to bind in case of using function decleration
this.handleChange = this.handleChange.bind(this);
}
handleChange(event){
props.handleChange("email", event.target.value);
}
render() {
return (
<div>
<input
onChange={this.handleChange}
/>
</div>
)
}