選擇其他選項，如果輸入不清空反應JS

我有一些代碼在我的反應成分：選擇其他選項，如果輸入不清空反應JS

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

我怎樣才能改變「一些類別」例如選擇選項，如果輸入的支付不是空的？我的意思是，如果用戶在「付款」輸入中輸入了一些文本（例如），選擇選項必須從默認更改爲第二或第三。和另一個文本輸入和選擇選項類似的東西？我怎樣才能做到這一點？

來源

2016-08-16 Simple runner

嗯，我來到這個代碼（它的工作對我來說和解決我的問題）：

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

也許這將是有益的人。

來源

2016-08-25 14:48:41

你必須讓所有的輸入 - controlled
保存輸入值到您的組件的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，讓您的選擇 - 控制
詳情請閱讀docs

來源

2016-08-16 08:57:44

您的意思是爲每個文本輸入和函數（例如handleChange）添加onChange，其中我檢查值是否爲空或不選擇所需的選擇選項？我如何將選擇選項從defaultValue更改爲第二個或第三個？ –

您需要使用'setState'將'value'保存在'onChange'事件中，然後在渲染函數中，您可以使用'value'來控制其他select元素 –

嗯，好的。我有這樣的代碼：'handleSelect（）{this.setState（{value：event.target.value}）; }'。我如何使用此值來控制其他選擇？使用一些三元運算符，如''？我是新手在反應，所以我只是不知道如何使用文本輸入值改變渲染fucntion中的選擇選項。 –

選擇其他選項，如果輸入不清空反應JS

回答

相關問題