React - 有条件地设置输入数值

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

我已经试过上述三元操作者设置值0，如果num1的值等于7.的默认值num1是6，当我升压至7中，不存在不同的I可以看到num2 。

请帮我解决这个问题。

Answer 1

尝试使用输入中的onChange事件进行验证

<input onChange={this.onChange} />

并创建一个onChange的方法，例如：

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'));

将状态添加到组件，然后通过onChange函数更改第一个输入的值。

然后根据该值显示第二个输入的值。

这是一个小提琴 。