javascript - 用参数处理事件处理函数的更好方法是什么?
问题描述
我尝试实现事件处理函数以避免每次组件renders
和re-renders
.
场景1:
如果我在下面的构造函数中绑定函数并且没有参数,onChange
它将只在捆绑文件中创建一个新函数一次
constructor(props){
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {
value: ""
}
}
handleChange(e){
this.setState({
value: e.target.value
});
}
render(){
const { value } = this.state;
return(
<div>
<input type="text" onChange={this.handleChange} value={value} />
</div>
)
}
场景2:
但是当我想传递some parameters
如下函数时event
,handleChange
我相信它会在每次组件renders
和re-renders
constructor(props){
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {
value: ""
}
}
handleChange(e, param1, param2){
this.setState({
value: e.target.value
});
}
render(){
const { value } = this.state;
return(
<div>
<input type="text" onChange={e => this.handleChange(e, param1, param2)} value={value} />
</div>
)
}
所以,
如何更好地编写方案 2,以便在捆绑文件中只创建一次新函数,而不是每次组件渲染和重新渲染时创建一个新函数?可能吗?
编辑:
param1 和 param2 是我自己的自定义值。
解决方案
如果目标组件可以传递多个参数(input
显然不能),那么您的第二种情况无需箭头函数即可工作:
render(){
const { value } = this.state;
return(
<div>
<CustomInput type="text" onChange={this.handleChange} value={value} />
</div>
)
}
例子:
class CustomInput extends React.Component {
constructor(props) {
super(props);
this.inputHandleChange = this.inputHandleChange.bind(this);
}
inputHandleChange(e) {
this.props.onChange(e, e.target.value.length, 'param2');
}
render() {
return (
<input {...this.props} onChange={this.inputHandleChange} />
);
}
}
class InputWrapper extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {
value: ""
}
}
handleChange(e, param1, param2) {
console.log(e.target.value, param1, param2);
this.setState({
value: e.target.value
});
}
render() {
const {
value
} = this.state;
return (
<div>
<CustomInput type="text" onChange={this.handleChange} value={value} />
</div>
)
}
}
ReactDOM.render(
<InputWrapper />,
demo
);
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="demo"></div>
推荐阅读
- scala - Spark:对象不可序列化
- python - 为什么我得到退出代码 -1 却没有在 IDE 中显示任何错误?
- python - 如何从 PDF(Python PDFminer)中提取指数?
- reactjs - 未触发 useEffect
- string - Octave 中的函数 strfind() 未在文本文件中找到双换行符
- python - 用 Python 装饰一个类,打印装饰类的 int 变量
- android - 使用 Android 打开蓝牙会使其成为信标吗?
- arrays - 电子表格减少了二维范围内的 JS 类函数?
- c++ - 有没有办法抑制 cppclean 问题?
- javascript - 初始化前无法访问“节点”