时间戳

首页 > 解决方案 > 输入表单 - 改变 onChange 和 isDisabled 的运行顺序

javascript - 输入表单 - 改变 onChange 和 isDisabled 的运行顺序

问题描述

我在 React 中实现了一个包含 3 个输入字段的网页，每个输入字段都具有以下属性

onChange={this.handleChange} 和 disabled={this.isDisabled()}

期望的行为是当输入字段包含 2 个数字时，焦点将移动到下一个输入字段。只要字段不包含 2 位数字，旁边的字段就必须 禁用。

实际发生的情况是，当我在第一个字段中键入第二个数字时，它运行 handleChange 函数，该函数检查该字段是否包含 2 个数字，确定是，然后将焦点移动到下一个输入字段。

但是下一个字段被禁用！（因为 isDisabled 函数还没有运行！）所以光标没有移动..我想改变发生的顺序，或者任何其他方式来解决它。

你有什么建议吗？

标签： javascriptreactjsinput

解决方案

几天前我也遇到过同样的问题。然而，我的方法是使用反应状态并通过从状态中获取的 id 来关注输入；

因此，为了方便起见，我们首先制作一张input - id地图。并使用document.getElementById(this.state.active).focus()功能。我们通过更改处理程序更改状态。

render() {
  this.setInputFocus();
  return (
     <div className="App">
       <input id="1" onChange={this.onChange} />
       <input id="2" onChange={this.onChange} />
       <input id="3" onChange={this.onChange} />
     </div>
   );
 }

 setInputFocus = () => {
   if (document.getElementById(this.state.active)) {
     document.getElementById(this.state.active).focus();
   }
 };
 onChange = e => {
   if (e.target.value.length === 2) {
     this.setState({ active: this.state.active + 1 });
   }
 };

这是一个完整的代码，可以在一定程度上解决这个问题

推荐阅读