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

Question

I have implemented in React a webpage with 3 input fields, each one with the properties of

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

The desired behavior is that when an input field contains 2 digits, the focus will be moved to the next input field. As long as the field doesn't contain 2 digits, the fields next to must be disabled .

What actually happens, when I type the second digit in the first field, it runs the handleChange function, that function checks whether the field contains 2 digits, find out that yes, and moves the focus to the next input field.

But the next field is disabled! (because the isDisabled function didn't run yet!) So the cursor doesn't move.. I want to change the order of the happenings, or any other way to solve it.

Do you have any suggestions?

Answer 1

The problem is that this.isDisabled() runs immediately in render but this.handleChange runs on click and most possibly doesn't change the state thus no rerender.

You sholdn't run function on next input, you should pass true or false to its disabled prop. Just make handleChange update the state which defines which fields are disabled. And pass that state to your inputs accordingly.

Answer 2

I had faced the same issue a few days back. My approach was however using react states and focusing the input by its id, that was fetched from state;

So first we make a input - id map for our convenience. And use document.getElementById(this.state.active).focus() function. We change our state via our change handler.

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