CODEWITHSUNDEEP
javascriptreactjsdropdownonchange
johnhour
johnhour

Reputation: 119

How to change the handleChange action based on the select input using react?

I have some handleChange actions need to be selected, when selected it will fire the selected handleChange action, below is the code:

handleChange action:

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,
 });
}

The dropdown menu select option:

<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>

The text input:

<input className="col-md-1" type="text" placeholder="10" 
value={this.state.greater_than} onChange={this.handleGreaterThanChange} required/>

I want to pass the value of the text input to the redux action but it always return as {this.state.greater_than} value, I want to like when select {this.state.smaller_than} in the option then it will pass the {this.state.smaller_than} value and fire the {this.handleSmallerThanChange} action, may I know how to do that? Thank you.

The redux action I do like this:

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;
};
}

The handleChange action modified:

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});
  };
}

Upvotes: 1

Views: 8464

Answers (1)

Paolo Dell&#39;Aguzzo
Paolo Dell&#39;Aguzzo

Reputation: 1431

I think you are not handling the select correctly. Why your options values are in the state? Your select has not an event handler and what's the select value? Why do you have an input with only handleGreaterThanChange?

However, what you have to do is to put in the state the selected value and let the select handle the change on the option selected.

Here's the code:

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')
);

You can try it with this jsFiddle.

Upvotes: 1

Related Questions