在reactjs中输入3个值时，如何自动聚焦美元值？_Reactjs_React Bootstrap_React Select

在reactjs中输入3个值时，如何自动聚焦美元值？

reactjs

在reactjs中输入3个值时，如何自动聚焦美元值？,reactjs,react-bootstrap,react-select,Reactjs,React Bootstrap,React Select,如上所述，当输入3个输入中的1个或全部3个时，我将如何在我的美元价值字段上设置焦点？下面的代码当前显示来自3种不同类型字段（收费金额、货币和fysigned）的数据代码谢谢ADOM Ref，因为美元值输入字段可以设置，然后用于控制焦点在App组件的构造函数中，创建Ref字段 constructor(props) { //... this.USDValueInputRef = React.createRef(); //... } 对于USDValueFormControl，

如上所述，当输入3个输入中的1个或全部3个时，我将如何在我的美元价值字段上设置焦点？下面的代码当前显示来自3种不同类型字段（收费金额、货币和fysigned）的数据

代码

谢谢

DOM Ref

，因为美元值输入字段可以设置，然后用于控制焦点

在

App

组件的构造函数中，创建

Ref

字段

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

对于USDValue

FormControl

，将

inputRef

属性设置为在构造函数中为

App

组件创建的

Ref

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

奖金：

您可以将状态更新从

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(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();
  })
}

然后在

setUSDValue

中一次更新状态

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

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

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

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();
  })
}

可以设置美元值输入字段的

DOM Ref

，然后使用它控制焦点

在

App