#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
}
ПРИМЕЧАНИЕ: Ссылки не работают в компонентах функций без состояния