Question

我在reactjs表单上有两个日期时间字段为

<div>
   <input type="text" name="startdate" value={this.state.startDate}  onBlur={this.validateStartDate} /> 
    <input type="text" name="enddate"value={this.state.endDate} onBlur={this.validateEndDate}/> 
</div>

我想验证startdate，是否小于endDate，如何将endDate值传递给validateStartDate函数？要么如果有更好的方法来验证输入日期字段，请提供相同的内容。

Answer 1

我看到你将endDate存储为州。因此，当用户模糊startDate来电validateStartDate时。在该函数中，使用endDate状态值进行验证。

参见伪代码

<div>
   <input type="text" name="startdate" value={this.state.startDate}  onBlur={this.validateStartDate} /> 
    <input type="text" name="enddate"value={this.state.endDate} onBlur={this.validateEndDate}/> 
</div>

function validateStartDate(){
   //check this.state.startDate < this.state.endDate
}

或者，您可以使用refs获取endDate值。

<div>
   <input type="text" ref="startDate" name="startdate" value={this.state.startDate}  onBlur={this.validateStartDate} /> 
    <input type="text" ref="endDate" name="enddate"value={this.state.endDate} onBlur={this.validateEndDate}/> 
</div>

function validateStartDate(){
   var startDate= ReactDOM.findDOMNode(this.refs.startDate).value
   var endDate = ReactDOM.findDOMNode(this.refs.endDate).value
   //check startDate < endDate
}

希望这有帮助！

Answer 2

您可以使用react。Check here for official documentation

支持的引用

<div>
    <input type="text" name="startdate" ref= (input) => {this.startData = input.value; } value={this.state.startDate}  onBlur={this.validateStartDate}  /> 
    <input type="text" name="enddate"value={this.state.endDate} onBlur={this.validateEndDate}/> 
</div>

在validateEndDate功能中，您可以参考参考号。

validateEndDate(){
    //you can use this.startDate here
}

注意：Refs在无状态功能组件中不起作用

如何在reactjs中将一个输入的值传递给另一个输入的onBlur事件？

2 个答案: