使用React.js将forName赋给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但不能给letterforEach循环中匹配的类.

我该怎么做？

提前致谢.

的jsfiddle

Answer 1

我将您的 for-loop 定义更改为 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'
            }
        }
    }

这段代码应该可以工作，除非您想要为其提供 className 的字母变量不是字符串字符。

确保也渲染了跨度。您还可以查看 this.refs 以及您跨度的参考。这样你就可以获取 DOMElement 并为其设置一个 className 。我将向您展示如何使用 refs 来获取 DOM 元素：

 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)

<span>H</span> --> 这个你可以给className

H --> 这个你不能给出 className