javascript - 编写一些从 jQuery 到 JS (React JS) 的代码

Question

以下 jQuery 代码片段存在问题。这是 onSubmit 事件的一小部分。

确切的问题是 :visible 选择器。我对如何用当前的(js+react)堆栈正确表示它感到疑问。

$( "form input:visible" ).each( function() {
 if (!$(this).val()){
  $(this).addClass( 'has-error' )
 }
} )

输入父项被 CSS 隐藏。 如果其中任何一个具有“has-error”类，则该表单将无效。

Answer 1

有很多方法可以解决这个问题。一种方法是存储一段状态，例如称为 subscribed，如果 subscribed 为 true，那么您可以将类 has-error 添加到您的渲染方法具有空字符串作为值并且可见。

示例

class Form extends React.Component {
  state = { email: "", username: "", submitted: false };
  changeEmail = e => this.setState({ email: e.target.value });
  changeUsername = e => this.setState({ username: e.target.value });
  onSubmit = e => {
    e.preventDefault();
    this.setState({ submitted: true });
  };

  render() {
    const { email, username, submitted } = this.state;

    return (
      <form onSubmit={this.onSubmit}>
        <input
          className={submitted && email.length === 0 ? "has-error" : ""}
          value={email}
          onChange={this.changeEmail}
        />
        <input
          className={submitted && username.length === 0 ? "has-error" : ""}
          value={username}
          onChange={this.changeUsername}
        />
        <input type="submit" />
      </form>
    );
  }
}

ReactDOM.render(
  <Form />,
  document.getElementById('root')
);

.has-error {
  border-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"><div>