Question

我有handleclick功能，但点击时没有调用。

以下是代码：

<div className="cal">

      <input type="num" name="res" value="0" handleClick={this.handleclick}  disabled style={{height:'8vh',width:'47vh',backgroundColor:'black',color:'white'}}/><br></br>
      <input type="button" name="ac" handleClick={this.handleclick} value="AC" style={{height:'5vh',width:'12vh',backgroundColor:'#ccced1',border:'1px solid black'}}/>
      <input type="button" name="+/-" handleClick={this.handleclick} value="+/-" style={{height:'5vh',width:'12vh',backgroundColor:'#ccced1',border:'1px solid black'}}/>
      <input type="button" name="%" handleClick={this.handleclick} value="%" style={{height:'5vh',width:'12vh',backgroundColor:'#ccced1',border:'1px solid black'}}/>
      <input type="button" name="/" handleClick={this.handleclick} value="/" style={{height:'5vh',width:'12vh',backgroundColor:'#ff9100',border:'1px solid black'}}/>
</div>

这是我的功能：

handleclick(e)
{    e.preventDefault();

    this.setState({value:e.target.value});
    console.log('helo click fire');
}

Answer 1

确保将功能绑定到目标：

this.handleclick = this.handleclick.bind(this)

然后在你的输入中：

onClick={this.handleclick}

Answer 2

看起来你需要绑定点击功能。

将您的功能更新为：

handleclick = (e) => {
    e.preventDefault();
    this.setState({value:e.target.value});
    console.log('helo click fire');
}

然后在您的组件中，您应该能够：

<input type="button" name="+/-" handleClick={(e) => this.handleclick(e)} value="+/-" style={{height:'5vh',width:'12vh',backgroundColor:'#ccced1',border:'1px solid black'}}/>

注意：

之间的区别

handleClick={this.handleClick}

和

handleClick={(e) => this.handleClick(e)}

您也可以尝试

onClick={(e) => this.handleClick(e)}

因为我不认为handleClick是输入/按钮的有效属性。

handleclick功能不起作用

2 个答案: