文字が入力されている時だけ色が変わって押すことができるボタンの作成

割と使う機会が多いはずだが、綺麗にまとまっているサイトがなかったのでまとめておく。

class Hoge extends Component {
  constructor() {
    super();
    this.state = { text: ''};
  }
  render() {
    return (
      <Container>
        <Content>
          <Form>
            <Item>
              <Input
                onChangeText={text => this.setState({ text })}
                value={this.state.text}
              />
            </Item>
          </Form>
        </Content>
        <Content>
          <Button
            disabled={!this.state.text}
            style={this.state.text ? PhoneNumStyles.body.buttonEnabled : PhoneNumStyles.body.buttonDisabled}
          >
            <Text>送る</Text>
          </Button>
        </Content>
      </Container>
    );
  }
}

関係ない要素は省略している。重要な部分は

style={this.state.text ? PhoneNumStyles.body.buttonEnabled : PhoneNumStyles.body.buttonDisabled}

で、textが入っていれば１番目のEnabledのcssが、入っていなければ２番めのDisabledのcssが実行されるようになっている。色々やってみたがこれが１番コンパクトで見やすい書き方だと思う。