Блог

Главная - Вопросы по программированию - как передать значение одного ввода в событие onBlur другого ввода в reactjs?

как передать значение одного ввода в событие onBlur другого ввода в reactjs?

#reactjs

#reactjs

Вопрос:

У меня есть два поля даты и времени в форме 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>

Я хочу проверить начальную дату, независимо от того, меньше ли она конечной даты или нет,
Как передать значение EndDate функции validateStartDate?
или
Если есть лучший способ проверки полей даты ввода, пожалуйста, укажите то же самое.

Ответ №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
}

Надеюсь, это поможет!

Комментарии:

1. я уже пробовал ваше первое предложение ранее, но я не упоминал об этой моей проблеме. Я получил ошибку TypeError: this.state is undefined в консоли

2. Добавьте this.validateStartDate = this.validateStartDate.bind(this) в свой конструктор.

3. Я не хочу использовать ссылки, есть ли какой-либо другой способ решить эту проблему.

4. Попробуйте мое первое предложение.

5. Это эффективный способ

Ответ №2:

вы можете использовать ссылки, поддерживаемые react.Проверьте здесь официальную документацию

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

ПРИМЕЧАНИЕ: Ссылки не работают в компонентах функций без состояния