如果React JS中的輸入不為空，請選擇另一個選項

Question

我的React組件中有一些代碼：

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

如果輸入的付款不為空，如何更改“某些類別”中的選擇選項？ 我的意思是，如果用戶在“付款”輸入中輸入一些文本（例如），則選擇選項必須從默認更改為第二或第三。 還有其他帶有文本輸入和選擇選項的東西嗎？ 我怎樣才能做到這一點？

Answer 1

您必須進行所有輸入- 受控
將輸入值保存到組件的state ，然后根據這些值執行呈現不同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>

您需要使用value屬性而不是defaultValue來進行選擇- 受控
在文檔中閱讀更多內容

Answer 2

好吧，我來到了這段代碼（它為我工作並解決了我的問題）：

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

也許對某人會有幫助。