Reactでボタンの状態を管理したい

Reactで開発をしています。

<input />や<Select />の中身が空（何も書かれていない）だったら<input type="submit" value="検索" />で定義されたボタンが押せないようにしたいです。
イメージとしては何も書いてなかったら、ボタンが灰色っぽくなって押せなくて、すべての項目が埋まっていればボタンの色が変わって押せるようになる感じです。

よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは

以下のようなコンポーネントを作ればよいかと思います。

<input> から入力される値や <select> で選ばれる値を state に持つようにする。
stateに保持されている入力値のいずれかが無効な値（＝空文字列など）であるときにボタンを押せないようにする。
ボタンを押せないようにする簡単な方法は disabled に　true を渡せばよい。

以下は上記の簡単なサンプルです。

jsx
1class App extends React.Component {
2  constructor(props) {
3    super(props);
4    this.state = {
5      word: "",
6      size: ""
7    };
8  }
9
10  changeValue = e => {
11    this.setState({ [e.target.name]: e.target.value });
12  };
13
14  buttonClick = () => {
15    alert(JSON.stringify(this.state));
16  };
17
18  render() {
19    return (
20      <div className="container">
21        <p>
22          <span>検索ワード:</span>
23          <input name="word" onChange={this.changeValue} className="word" />
24        </p>
25        <p>
26          <span>サイズ:</span>
27          <select name="size" onChange={this.changeValue} className="size">
28            <option value=""></option>
29            <option value="large">大</option>
30            <option value="medium">中</option>
31            <option value="small">小</option>
32          </select>
33        </p>
34        <br />
35        <p>
36          <input
37            type="submit"
38            value="検索"
39            onClick={this.buttonClick}
40            disabled={!this.state.word || !this.state.size}
41            className="button"
42          />
43        </p>
44      </div>
45    );
46  }
47}
48