1. ホーム
  2. reactjs

[解決済み] 入力が空のとき、ボタンを無効にするには?

2022-04-20 08:58:49

質問

Reactの初心者です。入力フィールドが空のとき、ボタンを無効にしようとしています。このためのReactの最良のアプローチは何ですか?

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

<input ref="email"/>

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

これでよいのでしょうか?

動的属性の重複だけでなく、ある要素から別の要素へのデータの転送/チェックも気になるので。

どのように解決するのですか?

入力の現在の値をステートで保持する(またはその値の変化を渡す)必要があります。 をコールバック関数で親に送る。 または 横向き または <あなたのアプリの状態管理ソリューションはこちら> のように、最終的にプロップとしてコンポーネントに戻されます)、ボタンの disabled プロップを導出することができます。

ステートを使用した例です。

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