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

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

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

这可能吗？

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

ReactJS OnKeyPress触发按钮

2 个答案: