Reactjs 如何更改动态子级的类名？

我想让电子邮件地址验证onBlur并将类更改为

无效

，以便客人知道。我该如何处理充满活力的孩子？另外，这是我第一次玩React，所以请随意建议更好的约定

var EmailList=React.createClass({
getInitialState:函数（）{
返回{emailInputs:[this.createInput（）]}；
},
validateEmail:函数（事件）{
var email=event.target.value；
变量re=/^（[\w-]+（？：\.[\w-]+）*）@（（？：[\w-]+\）*\w[\w-]{0,66}）\.（[a-z]{2,6}:（\.[a-z]{2}）$/i；
返回重新测试（电子邮件）；
},
createInput:function（）{
返回

},
getEmailInputs:函数（）{
if（this.state.emailInputs.lengththis.props.quantity；x--）{
this.state.emailInputs.pop（）
}  
}
返回this.state.emailInputs；
},
render:function（）{
回来
{this.getEmailInputs（）}
}
});
React.render（，document.getElementById（'container'）；

首先“切勿直接对this.state进行变异，因为之后调用setState（）可能会替换您进行的变异。请将this.state视为不可变的。”

使用此.setState（{myarray:[email]}）；相反循环并使用setState将完整数组添加到状态，然后呈现{this.state.myarray}

事实上，我会将数量放在状态中，并将相应数量的div添加到一个数组中，然后呈现这个数组（在状态中不存储这个数组，只存储数量属性）

为了回答您最初的问题，我将使用jquery（event.target）更改类。。。因为我很懒。但我怀疑使用状态来存储状态；）会更干净。（每个div的状态数组与键绑定，顺便说一句，react可能会请求键）

---

我希望它有帮助

React约定是使用

render（）

生成反映组件当前状态的内容。因此，可以更改的位通常被建模为状态，该状态要么作为

道具

传入，要么存储在组件自己的

状态

在这种情况下，每个电子邮件输入都需要一些状态，因此至少每个电子邮件输入都需要

value

和

valid

状态。由于存在输入列表，因此状态可以是具有

值

和

有效

属性的对象列表：

var DEFAULT_FIELD = {name: '', valid: null}

// ...

  getInitialState() {
    return {
      fields: Array(this.props.quantity).fill(DEFAULT_FIELD)
    }
  },

使用此状态，可以呈现如下字段：

  render() {
    return <ol>
      {this.state.fields.map((field, index) => <li>
        <input className={'email' + field.valid === false ? ' invalid' : ''}
               key={index}
               value={field.value}
               placeholder="Email Address" />
      </li>)}
    </ol>
  }

我有一个可运行的完整实现，用于避免状态突变：

如果您下载并提取此要点并运行

npm install

，运行

npm start

将启动支持热重新加载的webpack dev服务器，以便您可以使用它-例如，调整从

App.js

传递的

数量

道具

  render() {
    return <ol>
      {this.state.fields.map((field, index) => <li>
        <input className={'email' + field.valid === false ? ' invalid' : ''}
               key={index}
               value={field.value}
               placeholder="Email Address" />
      </li>)}
    </ol>
  }

  handleChange(index, event) {
    // Update this.state.fields[index] with new value
  },

  // ...

  render() {
    return <ol>
      {this.state.fields.map((field, index) => <li>
        <input className={'email' + field.valid === false ? ' invalid' : ''}
               key={index}
               value={field.value}
               placeholder="Email Address"
               onChange={this.handleChange.bind(this, index) />
      </li>)}
    </ol>
  }

  handleBlur(index, event) {
    // Update this.state.fields[index] with new validation status
  },

  // ...

  render() {
    return <ol>
      {this.state.fields.map((field, index) => <li>
        <input className={'email' + field.valid === false ? ' invalid' : ''}
               key={index}
               value={field.value}
               placeholder="Email Address"
               onChange={this.handleChange.bind(this, index)
               onBlur={this.handleChange.bind(this, index) />
      </li>)}
    </ol>
  }