Почему мое событие onClick не запускается в React?

Question

Я не могу определить, почему мое событие onClick не работает в моем приложении React.

Я пытаюсь создать строку div с буквами алфавита. Если щелкнуть один из элементов div, элемент div с его буквой должен быть удален из строки.

Я прикрепил событие onClick к элементам div как часть сопоставления строки алфавита в моем состоянии, но мне кажется, что я что-то упускаю / пропускаю, потому что вообще не могу щелкнуть элемент 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 . * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *, Поэтому вы должны указать, что делать с onClick

.

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

Примечание. Приведенный выше код устраняет проблему только для обеспечения обработки onClick. Что вы хотите сделать сейчас, так это убедиться, что ваш callLetter получает правильное письмо, заставив ваш компонент Letter обрабатывать событие.

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});
  }