如何使用react更改基于选择输入的handleChange操作？
如何使用react更改基于选择输入的handleChange操作？
提问于 2018-07-04 16:19:57
我有一些handleChange操作需要选择，当被选择时，它将触发所选的handleChange操作，以下是代码：
handleChange操作：
handleEqualChange(event){
this.setState({
equal: event.target.value,
});
}
handleNotEqualChange(event){
this.setState({
notequal: event.target.value,
});
}
handleGreaterThanChange(event){
this.setState({
greater_than: event.target.value,
});
}
handleSmallerThanChange(event){
this.setState({
smaller_than: event.target.value,
});
}
handleGOEChange(event){
this.setState({
goe: event.target.value,
});
}
handleLOEChange(event){
this.setState({
loe: event.target.value,
});
}下拉菜单选择选项：
<select>
<option value={this.state.equal}>Equal to</option>
<option value={this.state.notequal}>Not equal to</option>
<option value={this.state.greater_than}>Greater than</option>
<option value={this.state.smaller_than}>Less than</option>
<option value={this.state.goe}>Greater than or equal to</option>
<option value={this.state.loe}>Less than or equal to</option>
</select>文本输入：
<input className="col-md-1" type="text" placeholder="10"
value={this.state.greater_than} onChange={this.handleGreaterThanChange} required/>我想将文本输入的值传递给redux操作，但它总是作为{this.state.greater_than}值返回，我想像在选项中选择{this.state.smaller_than}时，它将传递{this.state.smaller_than}值并触发{this.handleSmallerThanChange}操作，我可以知道如何做到这一点吗？谢谢。
我做的redux操作如下：
export function createEvents(id, equal, notequal, greater_than, smaller_than, goe: goe, loe: loe, topic, email, contact) {
return (dispatch) => { // optionally you can have getState as the second argument
dispatch({
type: EVENTS_CREATE_EVENTS_BEGIN,
});
const promise = new Promise((resolve, reject) => {
// doRequest is a placeholder Promise. You should replace it with your own logic.
// See the real-word example at: https://github.com/supnate/rekit/blob/master/src/features/home/redux/fetchRedditReactjsList.js
// args.error here is only for test coverage purpose.
//const doRequest = args.error ? Promise.reject(new Error()) : Promise.resolve();
axios.get('http://192.168.10.124:3000/api/Limits?filter[where][topic]=' + topic)
.then(res => {
console.log(res.data[0].id);
axios.put('http://192.168.10.124:3000/api/Limits/' + res.data[0].id, { equal: equal, notequal: notequal, greater_than: greater_than, smaller_than: smaller_than, goe: goe, loe: loe, topic: topic, email: email, contact: contact }, {
headers: {
'Content-Type': 'application/json'
}
}).then(
(res) => {
dispatch({
type: EVENTS_CREATE_EVENTS_SUCCESS,
data: res,
});
resolve(res);
//window.location = '/events/events-page';
},
// Use rejectHandler as the second argument so that render errors won't be caught.
(err) => {
dispatch({
type: EVENTS_CREATE_EVENTS_FAILURE,
data: { error: err },
});
reject(err);
},
);
});
})
.catch(err => {
console.log(err);
});
return promise;
};
}修改的handleChange操作：
handleChange(event){
console.log("Event.target.value is", event.target.value);
this.setState({selectedOption: event.target.value});
if(this.state.selectedOption=="equal"){
this.setState({equal: event.target.value});
};
if(this.state.selectedOption=="notequal"){
this.setState({notequal: event.target.value});
};
if(this.state.selectedOption=="greater_than"){
this.setState({greater_than: event.target.value});
};
if(this.state.selectedOption=="smaller_than"){
this.setState({smaller_than: event.target.value});
};
if(this.state.selectedOption=="goe"){
this.setState({goe: event.target.value});
};
if(this.state.selectedOption=="loe"){
this.setState({loe: event.target.value});
};
}回答 1
Stack Overflow用户
发布于 2018-07-04 16:33:11
我认为您没有正确处理select。为什么您的选项值处于状态？您的select没有事件处理程序，select值是多少？为什么你的输入只有handleGreaterThanChange？
但是，您需要做的是将所选值置于状态中，并让select处理所选选项上的更改。
代码如下：
class Hello extends React.Component {
constructor(props){
super(props);
this.state = {
selectedOption:"equal"
}
this.handleChange = this.handleChange.bind(this);
}
handleChange(event){
console.log("Event.target.value is", event.target.value);
this.setState({selectedOption:event.target.value});
}
render() {
return (
<div>
<select value={this.state.selectedOption} onChange={this.handleChange}>
<option value={"equal"}>Equal to</option>
<option value={"notequal"}>Not equal to</option>
<option value={"greater_than"}>Greater than</option>
<option value={"smaller_than"}>Less than</option>
<option value={"goe"}>Greater than or equal to</option>
<option value={"loe"}>Less than or equal to</option>
</select>
</div>
);
}
}
ReactDOM.render(
<Hello/>,
document.getElementById('container')
);您可以使用this jsFiddle进行尝试。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51168973
复制相关文章
相似问题
腾讯云开发者
