web-dev-qa-db-ja.com

React.js：入力が空のときにボタンを無効にする

私はReact.jsに不慣れです、質問があなたのためにあまりにも愚かに聞こえたらすみません。

入力フィールドが空のときにボタンを無効にしようとしています。これに対するReactの最善のアプローチは何ですか？

私は次のようなことをしています。

<input ref="email"/>

<button disabled={!this.refs.email}>Let me in</button>

これは正しいです？

動的な属性の複製だけではありません。ある要素から別の要素へのデータの転送や確認にも興味があるからです。

reactjsreact-jsx
132
Stepan Suvorov

入力の現在の値を状態に維持する必要があります（またはその値の変更を渡す コールバック関数を介して親まで 、または 横 、または<ここにアプリの状態管理ソリューション>が最終的にコンポーネントにプロップとして渡されるように）、ボタンの無効なプロップを導出できます。

状態を使用した例：

<meta charset="UTF-8">
<script src="https://fb.me/react-0.13.3.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
<div id="app"></div>
<script type="text/jsx;harmony=true">void function() { "use strict";

var App = React.createClass({
  getInitialState() {
    return {email: ''}
  },
  handleChange(e) {
    this.setState({email: e.target.value})
  },
  render() {
    return <div>
      <input name="email" value={this.state.email} onChange={this.handleChange}/>
      <button type="button" disabled={!this.state.email}>Button</button>
    </div>
  }
})

React.render(<App/>, document.getElementById('app'))

}()</script>
222
Jonny Buchanan

定数を使用すると、検証のために複数のフィールドを組み合わせることができます。

class LoginFrm extends React.Component {
  constructor() {
    super();
    this.state = {
      email: '',
      password: '',
    };
  }
  
  handleEmailChange = (evt) => {
    this.setState({ email: evt.target.value });
  }
  
  handlePasswordChange = (evt) => {
    this.setState({ password: evt.target.value });
  }
  
  handleSubmit = () => {
    const { email, password } = this.state;
    alert(`Welcome ${email} password: ${password}`);
  }
  
  render() {
    const { email, password } = this.state;
    const enabled =
          email.length > 0 &&
          password.length > 0;
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type="text"
          placeholder="Email"
          value={this.state.email}
          onChange={this.handleEmailChange}
        />
        
        <input
          type="password"
          placeholder="Password"
          value={this.state.password}
          onChange={this.handlePasswordChange}
        />
        <button disabled={!enabled}>Login</button>
      </form>
    )
  }
}

ReactDOM.render(<LoginFrm />, document.body);
<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>
<body>


</body>
3
Gi1ber7

確認するもう1つの方法は、関数をインライン化して、レンダリングごとに条件を確認することです（すべての小道具と状態が変わる）。

const isDisabled = () => 
  // condition check

これは動作します：

<button
  type="button"
  disabled={this.isDisabled()}
>
  Let Me In
</button>

しかしこれはうまくいきません。

<button
   type="button"
   disabled={this.isDisabled}
>
  Let Me In
</button>
2
Marc Sloth Eastman