ReactJS OnKeyPress触发按钮按

Question

我很新ReactJS我只是想做一些小事情，以了解更多。

我想知道如果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> 
    ) 
    }