web-dev-qa-db-ja.com

ReactJS OnKeyPressでボタンを押す

私はReactJSに非常に慣れていないので、理解を深めるためにちょっとしたことをしているだけです。

OnKeyPressがボタン押下をトリガーできるかどうか疑問に思っていました。私はいくつかのsimilar質問を見てきましたが、OnKeyPressがトリガーしたのは、console.logまたはアラートだけでした。そのため、ボタンを押す方法がわかりませんでした。

これは私がこれまでに持っているものです：

class Form extends React.Component {
  onButtonPress = (e) => {
    // this is just an example of what happens when the button is pressed.
    this.setState({isClicked: true});
  }

  keyPress = (event) => {
    if (event.key == 'Enter'){
      // How would I trigger the button that is in the render? I have this so far.
      this.onButtonPress();
    }
  }

  render() {
    return (
      <div>
        <div className="fieldForm">
          <input
            value={name}
            type="name"
            onKeyPress={this.keyPress}
          />
        </div>
        <Button onClick={this.onButtonPress}>Submit</Button>
      </div>
    )
  }
}

ここには、コンストラクター、プロップ、状態オブジェクトの属性など、すべてを含めていないことに注意してください。

これの目的は、ボタンがクリックされたように見せることです。ボタンをクリックすると、ボタンに小さな読み込み記号が表示されます。 Enterキーを押した場合も同じことが起こります（ボタンに読み込み記号が表示されているため、ボタンを押します）。

これは可能ですか？

javascripthtmlreactjsonclickonkeypress
5
chakolatemilk

プログラムでDOMイベントをトリガーすることは、非常に具体的なニーズがない限り、やるべきことではありません。

onKeyPressとonClickはどちらもイベントハンドラーであり、イベントが発生したときに何でも実行できます。両方のハンドラーから必要な状態を設定する関数を呼び出すだけです。

次に例を示します。

class Form extends React.Component {
  handleFormSubmit = () => {
    this.setState({ isClicked: true });
  };

  handleButtonPress = () => {
    this.handleFormSubmit();
  };

  handleKeyPress = event => {
    if (event.key == 'Enter') {
      this.handleFormSubmit();
    }
  };

  render() {
    return (
      <div>
        <div className="fieldForm">
          <input value={name} type="name" onKeyPress={this.handleKeyPress} />
        </div>
        <Button onClick={this.handleButtonPress} loading={this.state.Load}>
          Submit
        </Button>
      </div>
    );
  }
}
3
elas

あなたが他に方法がないそしてあなたがすべきである場合（== --- ==）この要素をクリックする必要がある場合いくつかの漠然とした理由とelas が言った方法ではうまくいきませんでした。これを試して：

  onButtonPress = (e) => {
    console.log('hi hi')
  }

  handleKeyPress = (event) => {
    if (event.key === 'Enter') {
      this.refs.but.click()
    }
  }

  render () {
    return (
      <Layout>
        <div>
          <div className="fieldForm">
            <input
              value={'name'}
              type="name"
              onKeyPress={(e) => this.handleKeyPress(e)}
            />
          </div>
          <Button onClick={this.onButtonPress} ref="but">Submit</Button>
        </div>
      </Layout>
    )
  }
2
Soorena