输入表单——改变onChange和isDisabled的运行顺序答案

【问题标题】：Input form - change the running order of onChange and isDisabled输入表单——改变onChange和isDisabled的运行顺序
【发布时间】：2018-08-24 05:34:22
【问题描述】：

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

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

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

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

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

你有什么建议吗？

【问题讨论】：

看看 isDisabled 和 handleChange 做了什么会有所帮助。

标签： javascript reactjs input

【解决方案1】：

问题是this.isDisabled() 立即在render 中运行，但this.handleChange 在点击时运行并且很可能不会改变状态，因此不会重新渲染。

你不应该在下一个输入时运行函数，你应该将 true 或 false 传递给它的 disabled 属性。只需让handleChange 更新定义哪些字段被禁用的状态。并相应地将该状态传递给您的输入。

【讨论】：

【解决方案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

【讨论】：