Как динамически установить ErrorMessage для TextField с помощью метода Button onClick - PullRequest
Новая
       32

Как динамически установить ErrorMessage для TextField с помощью метода Button onClick

0 голосов
/ 16 февраля 2019

Мне нужно привязать ErrorMessage к текстовому полю только когда пользователь нажимает кнопку.В этом есть хорошие примеры, как использовать errormessage, но проблема в том, что я не знаю, как сделать добавление errorMeesage после нажатия пользователем 

 <TextField id='titleField' value={titleValue} required={true} label={escape(this.props.description)} onGetErrorMessage={this._getErrorMessage} validateOnLoad={false} />

И это вызов кнопки: 

private _buttonOnClickHandler() {
    let textvalue = document.getElementById('titleField')["value"];

    if(textvalue === "")
    {
        //call onGetErrorMessage or something that will set ErrorMeesage and input will be red
    }

    return false;
}

Спасибо

Ответы [ 2 ]

0 голосов
/ 18 февраля 2019

Самый простой способ, которым я могу придумать, - это предсказать onGetErrorMessage проверки состояния, которая отслеживает, была ли нажата кнопка. 

<TextField
    id='titleField'
    value={titleValue}
    required={true}
    label={escape(this.props.description)}
    // Only allow showing error message, after determining that user has clicked the button
    onGetErrorMessage={this.state.buttonHasBeenClicked ? this._getErrorMessage : undefined}
    validateOnLoad={false}
/>

Затем в вашем обработчике нажатия кнопки,просто установите это значение состояния: 

private _buttonOnClickHandler() {
    this.setState({ buttonHasBeenClicked: true });

    return false;
}

Пока вы создаете экземпляр buttonHasBeenClicked как false, этот метод будет отвечать требованию, что (a) до того, как пользователь нажмет кнопку, сообщения об ошибках не отображаютсяна TextField и (b) после того, как пользователь нажмет кнопку, начнут отображаться сообщения об ошибках.Вы сохраняете возможность использовать _getErrorMessage(value) для настройки сообщения об ошибке на основе текущего значения в TextField.

0 голосов
/ 16 февраля 2019

Вам необходимо установить состояние для отображения / скрытия сообщений об ошибках на основе пользовательского ввода. Проверьте ниже код 

import React, { Component } from 'react';

class App extends Component {
  state = {
    isErrorMessageHidden: true
  }
  clickHandler = () => {
    let textValue = document.getElementById('titleField').value;
    if(textValue === '')
      this.setState({isErrorMessageHidden: false});
    else
      this.setState({isErrorMessageHidden: true});    
  }
  render() {
    return (
      <div>
       <button onClick={this.clickHandler}>Check</button>
       <input type='text' id='titleField' />
       <p 
          style={{'color':'red'}}
          hidden={this.state.isErrorMessageHidden}
        >Please fill the form</p>
       </div>
    );
  }
}

export default App;

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

...