如果React JS中的输入不为空，请选择另一个选项

Question

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 1

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

Answer 2

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.