ReactJS OnKeyPress 触发按钮按下

Question

我对 ReactJS 很陌生，我只是想做一些小事来了解更多。

我想知道 OnKeyPress 是否可以触发按钮按下。我见过一些类似的问题，但 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>
    )
  }
}

请注意，我没有在此处包含所有内容，例如构造函数、道具或状态对象属性。

这样做的目的是使它看起来像按钮已被单击。单击按钮时，它将在按钮上显示一个小的加载标志。如果我按下回车键，我希望同样的事情发生（按钮上有加载标志，这就是我想要按下按钮的原因）。

这可能吗？

Answer 1

除非您有非常特殊的需求，否则您不应该以编程方式触发 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>
    );
  }
}

Answer 2

如果您没有其他方法并且您应该由于某种模糊的原因而单击此元素并且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>
    )
  }