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>
    )
  }
}

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

这样做的目的是使它看起来像已单击按钮。单击按钮后，按钮上会显示一个小的加载标志。如果要按Enter，我希望发生同样的事情（按钮上带有加载符号，这就是为什么我要按下按钮的原因）。

这可能吗？

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>
    );
  }
}