javascript – ReactJS OnKeyPress触发按钮按下

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

请注意,我没有在此处包含所有内容,例如构造函数,props或状态对象属性.

这样做的目的是使它看起来像点击按钮.单击该按钮时,它将在按钮上显示一个小的加载符号.如果我按下回车键(按下按钮上的加载符号,这就是我要按下按钮的原因),我希望发生同样的事情.

这可能吗？

解决方法:

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

标签：html,onkeypress,javascript,reactjs,onclick
来源： https://codeday.me/bug/20190828/1750640.html