Question

我想让电子邮件地址验证onBlur并将类更改为invalid，因此访客知道。如何与充满活力的孩子一起做到这一点？此外，这是我第一次玩React，所以请随意提出更好的约定。

  var EmailList = React.createClass({
      getInitialState: function() {
        return { emailInputs: [this.createInput()] };
      },
      validateEmail: function(event) {
        var email = event.target.value;
        var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
        return re.test(email);
      },
      createInput: function() {
        return <li><input class="email" onBlur={this.validateEmail} type="text" placeholder="Email Address"/></li>
      },
      getEmailInputs: function() {
        if (this.state.emailInputs.length < this.props.quantity) {
          // Add inputs
          for(var x = this.state.emailInputs.length; x < this.props.quantity; x++) {
            this.state.emailInputs.push(this.createInput())
          }  
        } else {
          // Remove inputs
          for(var x = this.state.emailInputs.length; x > this.props.quantity; x--) {
            this.state.emailInputs.pop()
          }  
        }

        return this.state.emailInputs;
      },
      render: function() {
        return <ol>
          {this.getEmailInputs()}
        </ol>
      }
    });

React.render(<EmailList quantity="5" />, document.getElementById('container'));

Answer 1

首先，“不要直接改变this.state，因为之后调用setState（）可能会替换你所做的突变。将this.state视为不可变的。”

https://facebook.github.io/react/docs/component-api.html

使用this.setState（{myarray：[email]}）;代替。循环并使用setState将完整数组添加到状态，然后呈现{this.state.myarray}

实际上我会将数量放在状态中并将相应数量的div添加到数组中并渲染此数组（不会在状态中存储此数组，只需数量prop）。

要回答你的初步问题，我只想用jquery（event.target）更改类...因为我很懒。但我怀疑使用州来存储州;）会更清洁。（每个div的状态数组都与键绑定，顺便说一下可能会要求键）

我希望它有所帮助

Answer 2

React惯例是使用render()生成内容，该内容反映了组件的当前状态。因此，可以改变的位通常被建模为状态，该状态可以作为props传入或存储在组件自己的state中。

在这种情况下，每个电子邮件输入都需要一些状态，因此每个电子邮件输入至少需要value和valid状态。由于存在输入列表，因此状态可以是具有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>
  }

这是只读的，因为您还没有提供输入更新状态的方法。您需要知道编辑字段在您所在州的数组中对应的索引：

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

您还需要onBlur验证的索引：

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

我有一个可运行的完整实现，它使用React's update() immutability helper来避免改变状态：

https://gist.github.com/insin/407de6bb93dfe077433f

如果您下载并解压缩此Gist并运行npm install，则运行npm start会在http://localhost:3000上启动一个支持热重新加载的webpack dev服务器，以便您可以使用它 - 例如调整从quantity传递的App.js道具。

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

2 个答案: