为什么我的 onClick 事件没有在 React 上触发？

Question

我不明白为什么我的onClick事件在我的 React 应用程序中不起作用。

我正在尝试用字母表中的字母创建一行div 。 当一div被点击秒， div ，其字母应该从线中删除。

我已将onClick事件附加到div作为我所在州的字母字符串映射的一部分，但我似乎遗漏/忽略了某些东西，因为我根本无法点击div 。

我确保在构造函数中绑定函数。

let { Grid, Row, Col } = ReactBootstrap;

class Letter extends React.Component {
  
  render () {
    const style = { border: '1px solid black',
                    display: 'inline-block',
                    fontSize: '4vw',
                    width: '4vw',
                    height: '8vh',
                    textAlign: 'center'};
    
    return (<div style={style} key={this.props.key}>
              {this.props.letter}
            </div>);
    
  }
}

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      alpha: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
    };
    
    this.callLetter = this.callLetter.bind(this);
  }
 
  callLetter(e) {
    var letterindex = this.state.alpha.indexOf(e.currentTarget.attributes[0].value);
    var alphaclone = this.state.alpha;
    
    alphaclone = alphaclone.slice(0, letterindex) + alphaclone.slice(letterindex + 1);
    
    this.setState({alpha:alphaclone});
  }
  
  render() {

    return (   
      <Grid>
        <Row className="show-grid" >
          {this.state.alpha.split('').map((item, i) =>
            (
                <Letter letter = {item} key = {i} onClick = {this.callLetter}/> 
            ))}
        </Row>
      </Grid>
    );
  }  
}

ReactDOM.render(
  <MyComponent/>,
  document.getElementsByClassName('container-fluid')[0]
);

谢谢你。

Answer 1

您需要将onClick添加到您的 Letter 组件中。

（您的 Letter 组件获得了一个 onClick 道具，但它不使用它。）

class Letter extends React.Component {

  render () {
    const style = { border: '1px solid black',
                display: 'inline-block',
                fontSize: '4vw',
                width: '4vw',
                height: '8vh',
                textAlign: 'center'};

    return (
      <div 
        style={style} 
        key={this.props.key} 
        onClick={this.props.onClick} // Have to pass onClick to div
      >
        {this.props.letter}
      </div>
    );
  }
}

发生的事情是 onClick 是一个只有DOM 元素知道的属性。 虽然Letter是您创建的 React 组件，因此您需要指定如何处理 onClick

 <Letter letter={item} key={i} onClick={this.callLetter}/> 

注意：上面的代码只修复了确保 onClick 被处理的问题。 您现在要做的是通过让您的 Letter 组件处理事件来确保您的 callLetter 获得正确的字母。

class Letter extends React.Component {
  onHandleClick = () => {
    this.props.onClick(this.props.letter);
  };

  render () {
    const style = { border: '1px solid black',
                display: 'inline-block',
                fontSize: '4vw',
                width: '4vw',
                height: '8vh',
                textAlign: 'center'};

    return (
      <div 
        style={style} 
        key={this.props.key} 
        onClick={this.onHandleClick} // Have to pass onClick to div
      >
        {this.props.letter}
      </div>
    );
  }
}

对于您的 callLetter，将参数更改为期望一个字母。

callLetter(letter) {
    var letterindex = this.state.alpha.indexOf(letter);
    var alphaclone = this.state.alpha;

    alphaclone = alphaclone.slice(0, letterindex) + alphaclone.slice(letterindex + 1);

    this.setState({alpha:alphaclone});
  }