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

Question

Мне нужно привязать 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;
}

Спасибо

Answer 1

Самый простой способ, которым я могу придумать, - это предсказать 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 чтобы быть ложным, то этот метод будет отвечать требованию, что (а) до того, как пользователь нажмет кнопку, сообщения об ошибках не отображаются TextFieldи (b) после того, как пользователь нажмет кнопку, начнут отображаться сообщения об ошибках. Вы сохраняете способность использовать _getErrorMessage(value) настроить сообщение об ошибке на основе текущего значения в TextField,

Answer 2

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

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;

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

Answer 3

Еще один подход - обрабатывать все проверки через значения состояния.

Определение управления выглядит следующим образом

<TextField placeholder="Enter a venue location" required onChange={this._onVenueChange} {...this.state.errorData.isValidVenue ? null : { errorMessage: strings.RequiredFieldErrorMessage }}></TextField>

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

private _onVenueChange = (event: React.FormEvent<HTMLTextAreaElement | HTMLInputElement>, newValue?: string): void => {

this.setState(prevState => ({
  errorData: {
    ...prevState.errorData,
    isValidVenue: newValue && newValue.length > 0,
    isValidForm: this.state.errorData.isValidForm && newValue && newValue.length > 0
  }
}));

this.setState(prevState => ({
  formData: {
    ...prevState.formData,
    venue: newValue
  }
}));
}

В приведенном выше примере я использую два объекта в состояниях: один для захвата значений, а другой для фиксации того, является ли поле ошибочным или нет.

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

Ура!!!