Как автоматически сфокусироваться на значении в долларах США, когда 3 значения введены в реагирование?

Question

Как упомянуто выше, как бы я установил фокус на поле моего значения в долларах США при вводе 1 из 3 входов или всех 3?Код ниже в настоящее время отображает данные из 3 различных типов полей (сумма, валюта и подпись)

КОД

https://codesandbox.io/s/8zv2v5mr22

Спасибо

Answer 1

A DOM Ref для поля ввода значения в долларах США можно установить, а затем использовать для управления фокусом на нем.

В конструкторе для компонента App создайте поле Ref.

constructor(props) {
  //...
  this.USDValueInputRef = React.createRef();
  //...
}

Для значения USDValue FormControl установите inputRef prop равным Ref, созданному в конструкторе для компонента App.

<FormControl
  type="text"
  defaultValue={this.state.USDValue}
  inputRef={this.USDValueInputRef}
/>

Где вы проверяете, что предыдущийтри значения поля установлены, вы можете сфокусировать ввод USDValue,

if (/* condition */) this.USDValueInputRef.current.focus();

Бонус :

Вы можете перемещать обновления состояния из onChangeAmountCharged, handleChangeCurrencyи handleChangeFYSigned обработчики событий на setUSDValue.

onChangeAmountCharged(e) {
  this.setUSDValue({ AmountCharged: e.target.value })
}

handleChangeCurrency(e) {
  this.setUSDValue({ Currency: e.value })
}

handleChangeFYSigned(e) {
  this.setUSDValue({ FYSigned: e.value })
}

Затем обновите состояние за один раз в setUSDValue.

setUSDValue(params) {
  let currencyParams = { ...this.state, ...params };
  const { AmountCharged, Currency, FYSigned } = currencyParams;
  const completed = AmountCharged && Currency && FYSigned;

  if (completed) {
    currencyParams = {
      ...currencyParams,
      USDValue: `${AmountCharged} ${Currency} ${FYSigned}`
    };
  }
  this.setState(currencyParams, () => {
    if (completed) this.USDValueInputRef.current.focus();
  })
}