ReactJS OnKeyPress 触发按钮按下

Question

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

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

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

这可能吗？

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

如果您别无他法并且您应该出于某种模糊的原因和[=14]的方法点击该元素=]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>
    )
  }

ReactJS OnKeyPress 触发按钮按下

ReactJS OnKeyPress to trigger a button press

html

javascript

onclick

onkeypress

reactjs