Question

当将事件传递给父元素时，我似乎无法让e.preventDefault（）处理程序在子元素上的React中工作。这是我的代码

var CountdownTimer = React.createClass({
  handleClick: function(e){
    this.props.addTime;
    e.preventDefault();
  },
  needMoreTime: function(){
    if(this.props.seconds_left < 10){
      return (
        <button className="btn btn-primary" 
        disabled={this.props.seconds_left > 10} 
        onClick={this.handleClick}>
        Need More Time?
        </button>
      )
    }
  },
  render: function(){
    return (
      <div style={{margin:"20px"}}>
        {this.needMoreTime()}
      </div>
    )
  }
})

var ReviewForm = React.createClass({
  addSixtySeconds: function(){
    return this.setState({time: this.state.time + 60});
  },
  render: function() {
    return (
      <div>
        <ReviewTextBox seconds_left={this.state.time}/>
        <CountdownTimer seconds_left={this.state.time} addTime={this.addSixtySeconds}/>
      </div>
    );
  }
});

当我取出e.preventDefault（）处理程序时，代码工作正常，但按钮被提交。在e.preventDefault（）中添加时，代码不起作用。如何才能让此按钮不提交？

Answer 1

似乎在

handleClick: function(e){
    this.props.addTime;
    e.preventDefault();
},

你想做点什么，但this.props.addTime;如果它是一个函数就不会做任何事情，因为你没有调用它。

如果它是一个函数，你应该使用this.props.addTime();来调用它。

中的逻辑

needMoreTime: function(){
    if(this.props.seconds_left < 10){
        return (
        <button className="btn btn-primary" 
          disabled={this.props.seconds_left > 10} 
          onClick={this.handleClick}>
          Need More Time?
        </button>
        )
    }
},

似乎很奇怪，因为仅当this.props.seconds_left < 10显示值时，该按钮的禁用将永远不会为真，因为它的条件为this.props.seconds_left > 10，这意味着它只会在未呈现时被禁用。 / p>

Answer 2

我会确保我使用本机事件而不是ReactJS Universe的合成事件。您可以使用此组件提供名为React Native Listener的库，轻松地包装链接，按钮或包含您要正确处理的本机行为的任何内容。

首先，安装：

npm install --save react-native-listener

然后，导入它：

var NativeListener = require('react-native-listener');

然后包裹你的按钮。您将看到您的preventDefault按预期工作：D

return (
<NativeListener onClick={this.handleClick.bind(this)}>
    <button className="btn btn-primary" disabled={this.props.seconds_left > 10}>
        Need More Time?
    </button>
</NativeListener>
)

事件在将事件传递给父级时阻止ReactJS中的默认值

2 个答案: