CODEWITHSUNDEEP
javascriptreactjs
Simple runner
Simple runner

Reputation: 445

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?

Upvotes: 1

Views: 2651

Answers (2)

Simple runner
Simple runner

Reputation: 445

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.

Upvotes: 0

Dmitriy Nevzorov
Dmitriy Nevzorov

Reputation: 6078

You have to make all your inputs - controlled
Save input values to a state of your component and based on those values perform the logic you need to render different options

  <select value={this.state.myValue} onChange={this.handleChange}>
    <option value="A">Apple</option>
    <option value="B">Banana</option>
    <option value="C">Cranberry</option>
  </select>

You need to use value attribute instead of defaultValue to make your select - controlled
Read more in docs

Upvotes: 2

Related Questions