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，我已尝试使用上面的三元运算符设置值0. num1的默认值为6，当我加入时7，我在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函数更改第一个输入的值。

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

这是fiddle。

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

2 个答案: