Как вызвать проверку Textbox на изменение значения другого компонента в React. js? - PullRequest
Новая
       9

Как вызвать проверку Textbox на изменение значения другого компонента в React. js?

1 голос
/ 20 февраля 2020

Хотите вызвать проверку Textbox из-за изменения значения другого пользовательского компонента, который устанавливает значение в состоянии.

Обработчики: 

handleValueChange = (val, elementName) => {
    this.setState({
      ...this.state,
      [elementName]: val
    });
};

handleSelectOptionTab = tab => {
    console.log("tab : ", tab)//tab :  {discountType: "Amount"}
    this.setState({ ...this.state, ...tab });
};

Компоненты ввода: 

<Textbox
  tabIndex="1"
  name="discount"
  id={"discount"}
  type="number"
  value={_.toString(this.state.discount)}
  placeholder="Enter discount"
  onChange={val => this.handleValueChange(val, "discount")}
  onBlur={() => {}}
  validate={this.state.validate}
  validationCallback={res => {
    this.setState({
      ...this.state,
      hasDiscountError: res
    });
  }}
  validationOption={
    this.state.discountType === "Percent"
      ? {
          name: "discount",
          required: true,
          reg: /regext-for-percent/,
          regMsg:"validation msg 1"
        }
      : {
          name: "discount",
          required: true,
          reg: /regex-for-amount/,
          regMsg: "Validation msg 2"
        }
  }
/>

//Options: "Amount", "Percent"
//This is selectable optional buttons where user can choose anyone among multiple options (discountType: "Amount" or discountType: "Percent")
<OptionalButton
  selection={this.state}
  identifier={"discountType"}
  tabIndex="2"
  onSelect={tab => this.handleSelectOptionTab(tab)}
  options={DISCOUNT_TYPES}
/>

Проверка Textbox работает нормально при изменении значения и фокусируется с Textbox, но если значение уже присутствует и this.state.discountType является изменением с OptionalButton, в этом случае проверка не работает.

Пример: Textbox значение равно 10000 с типом, выбранным как "Amount", который действителен, но так как тип изменен на "Percent", тогда Textbox должен показать ошибку проверки.

Ответы [ 2 ]

1 голос
/ 25 февраля 2020

Вам также следует обновить this.state.validate после изменения вкладки. Проблема в том, что текстовое поле не знает, что для изменения вкладки требуется повторная проверка, поэтому вы должны сообщить об этом, используя значение this.state.validate.

Измените метод handleSelectOptionTab следующим образом: 

handleSelectOptionTab = tab => {
    console.log("tab : ", tab)//tab :  {discountType: "Amount"}
    // try and use a function inside setState, instead of an object
    this.setState(oldState => ({ ...oldState, ...tab, validate: true }));
};

и затем в вашем валидации Обратный звонок 

  validationCallback={res => {
    this.setState(oldState => ({
      ...oldState,
      hasDiscountError: res,
      validate: false // to not trigger another validation again
    }));
  }}
1 голос
/ 24 февраля 2020

Возможно, компонентом параметра является изменение, а затем вызвать this.handleValueChange (val, "discount").

Вы используете ref для расширенного компонента.

Следующий код для использования ref

Например, элемент div 

const refTest = React.createRef<HTMLDivElement>()

И использовать для компонента 

<div className="App" ref={refTest}>

I не знаю, какое использование для компонента, поэтому пример элемента div.

Затем вы должны вызвать «handleValueChange» событие для «refTest» component

...