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

ysugiyama12 14views 更新:2017年3月16日

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

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が入っていれば1番目のEnabledのcssが、入っていなければ2番めのDisabledのcssが実行されるようになっている。色々やってみたがこれが1番コンパクトで見やすい書き方だと思う。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません