问题描述
如何根据下拉列表编写具有各种状态变量更改的泛型函数。
例如：
我有下拉菜单1和下拉菜单2。如果我更改了
下拉菜单1，我需要更改一些状态变量，例如a，b，c
下拉菜单2，我需要更改一些状态变量，例如x，y，z
我可以用2个功能来做到这一点。 但是如何为此编写一个通用函数呢？
handleChange: function(e) {
//api call to xyz.com/getcompany/<company id> to get the job list here
this.setState({
selectedCompany: e.target.value,
companychange: "company changed. New value: " + e.target.value
})
},
handleChange2: function (e) {
// api call to xyz.com/jobstatus/<job id> to get the job status\(like how many position available for this job\) here
this.setState({
jobchange:"job changed. New value " + e.target.value
})
}
Codepen： ：//codepen.io/asdhanapal/pen/WmwJPj editors 0011
1楼
Jonas Wilms
1
已采纳
2019-03-02 19:20:02
您可以使用curried函数来简化代码：
changeToState(fn) {
return e => this.setState(fn(e));
}
render() {
//...
<input onChange={changeToState(e => ({ selectedCompany: e.target.value, /*...*/ }))} />
<input onChange={changeToState(e => ({ jobChange: e.target.value, /*...*/ }))} />
}
如果这仍然很重要，则可以将handleChange事件提取到功能组件中：
const StateChanger = ({ action, parent, ...props }) => (
<input onChange={e => parent.setState(action(e))} {...props} />
);
// inside a component's render:
<StateChanger parent={this} action={e => ({ selectedCompany: e.target.value })} style={{ color: red }} />
但是正如我在评论中已经提到的那样，这可能会删除重复的代码，但是它并不会提高可读性/可维护性。
2楼
Sudhir Dhumal
0
2019-03-02 19:03:54
您可以使用以下代码段：
handleChange = event => {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
};
对React docs部分的引用： :
3楼
Umair Farooq
0
2019-03-02 19:06:06
您可以使用以下内容：
handleChange = event => {
const { name, value } = event.target;
this.setState({
[name]:value
})
}
// in input
<input name="username" onChange={this.handleChange} />
4楼
David
0
2019-03-02 20:06:05
尝试这个：
handleChange: function(source, e) {
switch(source) {
case 'company':
//Need to do api call to get the job list here
this.setState({
selectedCompany: e.target.value,
companychange: "company changed. New value: " + e.target.value
})
break;
case 'job':
// Need to do api call to get the job status\(like how many position available for this job\) here
this.setState({
jobchange:"job changed. New value " + e.target.value
})
break;
};
},
<select value={this.state.selectedCompany} onChange={this.handleChange.bind(this, 'company')}>
<select value={this.state.selectedCompany} onChange={this.handleChange.bind(this, 'job')}>
5楼
mzedeler
0
2019-03-02 21:00:12
在阅读您对需求的描述时，下拉列表1和下拉列表2之间没有功能依赖性，因此我将其分为两个单独的组件。