反應 - 有條件地設置輸入數字值

Question

我有2個輸入類型數字字段，我試圖根據第一個（num1）值有條件地設置第二個字段值（num2）。

<input ref="num1" type="number" min="1" max="7" defaultValue={6}/> 

<input ref="num2" type="number" min="0" max={this.refs.num1 === 7 ? 0 : 10} defaultValue={10}/> 

我已經試過上述三元運算如果num1的值等於7. num1的默認值是6，當我升壓至7中，不存在不同的I可以看到設置值0在num2。

請幫我解決這個問題。

Answer 1

嘗試通過輸入

<input onChange={this.onChange} /> 

使用onChange事件驗證，並創建一個方法onChange與womthing像：

onChange(e) { 
    let value = e.target.value; 
    return validation; 
} 

Answer 2

我不知道，如果我知道你想什麼，而是你可以嘗試這樣的事情：

class Test extends React.Component { 
    constructor(props){ 
     super(props); 

     this.state = { 
     num1: null 
     } 
    } 

    onChange(num, e){  
     this.setState({num1: e.target.value}); 
    } 

    render(){ 
     return(
      <div> 
       <input type="number" min="1" max="7" defaultValue={6} value={this.state.num1} onChange={this.onChange.bind(this, "num1")}/> 
       <input type="number" min="0" max={10} value={this.state.num1 == 7 ? 10 : 0} /> 
      </div> 
     ); 
    } 
} 

React.render(<Test />, document.getElementById('container')); 

將狀態添加到您的組件和th通過onChange函數改變第一個輸入的值。

然後根據該值顯示第二個輸入的值。

這是fiddle。