使用 react 更改文本輸入的焦點

Question

我的目標是創建一個表單，當您按回車鍵時，它會將您切換到下一個輸入元素，並在您進行最后一個輸入時提交表單。

這是為移動設備構建的，因為在瀏覽器中沒有使用“下一步”按鈕而不是“轉到鍵盤”按鈕的選項（有關此問題的更多信息，請參閱此答案）。

為了更好地形象化這一點，這里有一張圖片：

我也寫了一些代碼，但這里的重點是我無法在正確的位置捕捉​​事件，所以表單在返回后立即提交或者當我阻止事件時，焦點在我點擊后改變返回2次。

請參閱此處的示例： https : //codepen.io/ofhouse/pen/Rgwzxy （我也粘貼了下面的代碼）

class TextInput extends React.Component {
  constructor(props) {
    super(props);
    this._onKeyPress = this._onKeyPress.bind(this);
  }

  componentDidMount() {
    if (this.props.focus) {
      this.textInput.focus();
    }
  }

  componentDidUpdate(nextProps) {
    if (nextProps.focus) {
      this.textInput.focus();
    }
  }

  _onKeyPress(e) {
    if (e.key === 'Enter') {
      this.props.onSubmit(e);
    }
  }

  render() {
    return (
      <div>
        <input
          type="text"
          onKeyPress={this._onKeyPress}
          ref={input => {
            this.textInput = input;
          }}
        />
      </div>
    );
  }
}

class Application extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      currentElement: 0,
    };
  }

  _submitForm(e) {
    // If I remove this preventDefault it works, but also the form is submitted --> SiteReload
    e.preventDefault();
  }

  _changeFocus(nextElement) {
    return e => {
      this.setState({
        currentElement: nextElement,
      });
    };
  }

  render() {
    const { currentElement } = this.state;
    return (
      <form>

        <h1>React input focus</h1>

        <TextInput focus={currentElement === 0} onSubmit={this._changeFocus(1)} />
        <TextInput focus={currentElement === 1} onSubmit={this._changeFocus(0)} />

        <div>
          <button type="submit" onClick={this._submitForm}>Submit</button>
        </div>

      </form>
    );
  }
}

ReactDOM.render(<Application />, document.getElementById('app'));

Answer 1

我認為你沒有使用最好的方法，讓我解釋一下。 輸入的聚焦是由原生 DOM 元素的focus方法完成的。 要根據哪個輸入具有當前焦點來了解要關注哪個輸入是必須在這些輸入的容器中實現的邏輯，在您的情況下是Application組件。

我對您的代碼進行了一些重大更改，現在可以正常工作了： CodePen

讓我解釋一下：

首先，當按下的鍵是'Enter'時，我們阻止提交輸入的keyPressed事件，以防止表單submit

_onKeyPress(e) {
  if (e.key === 'Enter') {
    this.props.onSubmit(e);
    e.preventDefault();
  }
}

我們不需要TextInput componenDidMount和componentDidUpdate ，我們只需要一個focus方法：

focus() {
  this.textInput.focus();
}

大多數更改是在Application組件中進行的。 首先，我們不需要狀態，我們真正需要的是將輸入放在一個數組中，以便我們可以將focus放在它們上。

constructor(props) {
  super(props);

  this.inputs = [];
}

要改變焦點，我們只需要輸入的索引來調用TextInput組件的focus方法：

_changeFocus(index) {
  return e => {
    this.inputs[index].focus();
  };
}

然后我們需要一種方法將輸入添加到this.inputs ， ref屬性將是理想的，我已經創建了_addInput方法作為幫助：

_addInput(index) {
  return input => {
    this.inputs[index] = input;
  };
}

最后，在渲染TextInput您需要將它們_addInput傳遞給ref並將_changeFocus給onSubmit ，以及它們各自的索引：

<TextInput ref={this._addInput(0)} onSubmit={this._changeFocus(1)} />
<TextInput ref={this._addInput(1)} onSubmit={this._changeFocus(0)} />

在第二個TextInput我將焦點更改為第一個，但也許提交表單會更有用。