TOGOUTECH

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

coder 2024-12-30 原文

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

然后我检查该单词中是否有特定字母并使用 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

最佳答案

我将您的 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

关于javascript - 使用 React.js 将 className 赋予 forEach 循环中的匹配元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40625681/

javascriptclassNameletterthisreactjsforeach

有关javascript - 使用 React.js 将 className 赋予 forEach 循环中的匹配元素的更多相关文章

  1. javascript - 为什么我的 Ice Candidate 请求触发了 6 次而不是 1 次？ - 2

    我正在使用WebRTC编写我的第一个点对点连接应用程序，我通过socket.io连接发送的用于从对等点请求icecandidate的代码触发了6次而不是一次。这真的很令人困惑，因为如果我错误地设计了一个大请求循环，我会期望无限递归，而不仅仅是6(8个onicecandidate事件)。那么谁能告诉我为什么下面的代码会产生6个递归？这里是消息处理程序，它只是发送一条由语法控制的socket.io消息:Muveoo.Messenger.input('icecandidaterequest',data);'icecandidaterequest':function(data){console

  2. javascript - 如何从 asar 存档提供静态文件 - 2

    我正在尝试构建一个带有服务器组件的Electron应用程序，使用express进行远程控制。express模块初始化为varstaticPath=path.resolve('app/assets')setupNotifications(server);app.use(cors());app.use('/api/',json());app.use('/api/',router);app.use('/assets',express.static(staticPath));console.log('servingstaticfilesfrom:'+staticPath);Elecrondoc

  3. javascript - 如何使用 Node js 和 babel 保留正确的行号 - 2

    我有以下设置并且我的错误/堆栈跟踪有问题我是否遗漏了什么？package.json看起来像:{"name":"xxxxxx","main":"server.js","private":true,"scripts":{"start":"nodemon--exec./node_modules/.bin/babel-nodeserver.js"},"dependencies":{"babel":"^6.5.2","babel-cli":"^6.6.5","babel-preset-es2015":"^6.6.0","babel-preset-react":"^6.5.0","babel-pr

  4. javascript - 已知的 JavaScript 指令 - 2

    ECMAScript规范定义了UseStrictDirective，但允许实现定义自己的指令。来自here:ImplementationsmaydefineimplementationspecificmeaningsforExpressionStatementproductionswhicharenotaUseStrictDirectiveandwhichoccurinaDirectivePrologue.什么是已知的特定于实现的指令？在Google上快速搜索一下，除了usestrict什么也没有。我能想到useasm和usestrong.还有其他的在用吗？

  5. javascript - 谷歌浏览器导航器在线始终为真 - 2

    基于mozilla开发者网络https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine它说Returnstheonlinestatusofthebrowser.Thepropertyreturnsabooleanvalue,withtruemeaningonlineandfalsemeaningoffline.Thepropertysendsupdateswheneverthebrowser'sabilitytoconnecttothenetworkchanges.Theupdateoccurswhen

  6. javascript - 如何使用 nodemailer 和电子邮件模板发送消息？ - 2

    我尝试使用nodemailer和电子邮件模板发送电子邮件。现在我从这里exampleemailtemplates得到了例子。但是当我检查这段代码时，出现错误apromisewasrejectedwithanon-error:[objectUndefined]请帮帮我。这是我的代码varnodemailer=require('nodemailer');varEmailTemplate=require('email-templates').EmailTemplate;exports.sendOne=function(){vartemplatesDir=config.templatesDir

  7. javascript - 在注册表单上，表单字段未保存在提交时自动填写的浏览器中。(ReactJs) - 2

    我的站点中有一个注册表单，我正在其中保存字段，并且在用户再次返回该注册表单时保存表单后，我希望将以前的字段值保存在浏览器自动填充中。下面是我的代码片段-SignUp在anchor标记的onClick代码中，我通过注册用户函数进行ajax调用。之后，我希望用户数据自动填充到chrome中的浏览器自动填充地址中。我尝试了以下方法:-1.很少有人建议使用表单“提交”按钮功能将数据保存在自动填充中，而不是使用ajax调用表单anchor标记的onClick事件。但这对我来说也不起作用。2.我看过一些帖子，其中他们告诉我要为字段使用专有名称和自动完成属性。但使用该浏览器只能猜测正确的字段值。

  8. javascript - CORS 预检错误 redux & loopback API - 2

    我在react-redux上有一个客户端应用程序，在loopback上有一个API应用程序。对于本地测试，我在端口8080上运行客户端应用程序，在端口3000上运行服务器应用程序。当我尝试使用客户端应用测试GoogleOAuth(使用loopback-passport组件)时，出现以下错误。当我使用POSTMAN对其进行测试时，没有任何问题。这是客户端代码，require('babel-polyfill');import{CALL_API}from'redux-api-middleware';importCfrom'../constants';constAPI_ROOT='http:/

  9. javascript - 在 Webpack 和 React.js 中设置代码拆分 - 2

    我正在尝试在我的应用程序中设置代码拆分/分块-通过路由，使用require.ensure。所以这是我的路线:{require.ensure([],(require)=>{cb(null,require('attendee/containers/Profile/').default)},'attendee')}}/>以下是我的webpack配置中的相关行:constPATHS={app:path.join(__dirname,'../src'),build:path.join(__dirname,'../dist'),};constcommon={entry:[PATHS.app,],o

  10. javascript - 如何忽略 node.js 中另一个文件或组件所需的文件 - 2

    以下可以忽略或对导入的文件进行一些修改，例如在我的index.js中require.extensions['.js']=function(file){console.log(file.id)return;};但是我真的不想忽略index.js中的这些文件我想忽略在后续文件/组件中导入的文件require.extensions['.js']=function(file){console.log(file.id)return;};require('babel-register')require('./components/Test.spec.js');例如，这会记录以下内容并返回/User

随机推荐