反应 - 有条件地设置输入数字值

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。