Simple runner Simple runner - 3 months ago 24
Javascript Question

Select another option if input not empty in react js

I have some code in my react component:

<legend>Data:</legend>
<Input type="text" name="Payment" id="Payment" className="validate[required, custom[integer], max[9999999999999]]" placeholder="2000" addonBefore="Payment" addonAfter="cents" />
<Input type="text" name="Value" id="Value" className="validate[required, custom[integer], max[9999999999999]]" placeholder="3500" addonBefore="Value" addonAfter="cents" />
<Input type="select" label="Some code" placeholder="placeholder" >
<option value="0">option1</option>
<option value="1">option2</option>
<option value="2">option3</option>
</Input>
<Input type="select" label="Some category" placeholder="Category">
<option value="0">category1</option>
<option value="1">category2</option>
<option value="2">category3</option>
<option value="3">Category4</option>
<option value="4">Category5</option>
</Input>
<Input type="select" label="Another code" placeholder="some code">
<option value="1">code1</option>
<option value="2">code2</option>
<option value="3">code3</option>
<option value="4">code4</option>
<option value="5">code5</option>
<option value="8">code6</option>
<option value="7">code7</option>
</Input>
</fieldset>


How can i change select option for example in "Some category", if input payment not empty? I mean, if user enter some text in "Payment" input(for example), select option must be changed from default to second or third. And something like that with another text input and select option? How can I do this?

Answer

Well, I came to this code(it's worked for me and solve my problem):

state : {
  text: '',
  select: 0
},
handleChange({target: {id, value}}) {
  const data = {[id]: value};
  if (id == 'Payment' && value.length != 0) {
    data.select = 4;
  } else if (id == 'Value' && value.length != 0){
    data.select = 2;
  } else {
    data.select = 0;
  }
  this.setState(data);
},
/* some code in render fucntion for our form*/ 

Maybe it will be helpfull for someone.