javascript - 使用 React.js 将 className 赋予 forEach 循环中的匹配元素

Question

伙计们，我在我的示例中有一个随机词，我正在将该随机词的字母拆分为跨度。

然后我检查该单词中是否有特定字母并使用 forEach 循环来实现此目的。这是我的职责；

 getLetter:function(e){
   var val = e.currentTarget.textContent;
    this.state.letters.forEach(function(letter) {
     if (letter === val) {
     alert("There is 'r' letter in the word.")
     e.target.className = 'clicked';
     letter.className='foundedLetter';
    }
});

我可以给类 e.target 但不能给类在 forEach 循环中匹配的 letter。

我怎样才能做到？

提前致谢。

JSFIDDLE

Answer 1

我将您的 for 循环定义更改为 for of 循环，使眼睛更清晰。

    getLetter(e)
    {
        var val = e.currentTarget.textContent;

        for (let letter of this.state.letters) {
            if (letter === val) 
            {
                e.target.className = 'clicked';
                letter.className = 'foundedLetter'
            }
        }
    }

这段代码应该可以工作，除非您要为其赋予类名的字母变量不是字符串字符。

确保您也渲染了跨度。您还可以查看 this.refs 和您的跨度引用。有了这个，您可以获得 DOMElement 并为其设置一个类名。我将向您展示如何使用 refs 获取 DOMelements:

 var MyCom = React.createClass({
  getInitialState: function() {
    return {
      random: 'lorem',
      letters:[],
      letter: ''
    }
  },
  splitLetter:function(){
   var s = this.state.random;
   for (var i = 0; i < s.length; i++) {
    this.state.letters.push(s.charAt(i));
   }
   this.setState({
   letters:this.state.letters
   })
  },
  getLetter:function(e){
   var val = e.currentTarget.textContent;
   var _this = this;
    this.state.letters.forEach(function(letter) {
     if (letter === val) {
     alert("There is 'r' letter in the word.")
     console.log(letter, val);
     e.target.className = 'clicked';
     _this.setState({letter: letter})
    }
});
  },
  render: function() {
    return (
      <div>
      <p>The word is: <strong>{this.state.random}</strong></p>
      <p>Click the button first then click the r letter below</p>
        <button onClick={this.splitLetter}>Split letter</button>
        <p>Click on: <strong><span onClick={this.getLetter}>r</span></strong></p>
      {this.state.letters.map(function(item){  
  return (
       <div>
         <span className={item == this.state.letter ? 'foundedLetter' : ''}>{item}</span>  
      </div>
       )
    },this) /*added this to map function  */
    }
    </div>
    )
  }
});

ReactDOM.render(
  <MyCom/>,
  document.getElementById("app")
)

例如:console.log(this.state.letters)

H -->这个你可以给className

H --> 这个你不能给className