Question

我无法发现为什么我的onClick事件无法在我的React应用程序中运行。

我正在尝试用字母表中的字母创建一行div。单击其中一个div时，应从行中删除带有字母的div。

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

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

这是代码的CodePen。

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元素知道的属性。虽然信件是您创建的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});
  }

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

1 个答案: