Question

我已经在React中实现了一个网页，其中包含3个输入字段，每个输入字段的属性为

onChange = {this.handleChange}和Disabled = {this.isDisabled（）}

所需的行为是，当输入字段包含2位数字时，焦点将移至下一个输入字段。只要该字段不包含2位数字，则必须禁用。

实际上发生了什么，当我在第一个字段中输入第二个数字时，它将运行handleChange函数，该函数将检查该字段是否包含2个数字，找出是，然后将焦点移至下一个输入字段。

但是下一个字段被禁用！（因为isDisabled函数尚未运行！）因此光标不会移动。我想更改事件发生的顺序，或通过其他任何方法来解决。

您有什么建议吗？

Answer 1

问题是this.isDisabled()在render中立即运行，但是this.handleChange在单击时运行，并且很可能不会更改状态，因此无法重新呈现。

您不保留在下一个输入上运行功能，应该将true或false传递给其disabled道具。只需使handleChange更新定义了哪些字段被禁用的状态即可。然后将该状态传递给您的输入。

Answer 2

几天前，我遇到了同样的问题。但是，我的方法是使用反应状态，并通过从状态获取的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 });
   }
 };

Here is a full code that somewhat solves the issue

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

2 个答案: