React Ternary (üçlü) koşullu ifade kullanımı

Koşullar için genelde if else kullanırız.  Javascripte koşulları kullanmanın bir yoluda ? : ternary operatörleridir. Kullanımı daha pratiktir. Ben genelde bunu kullanıyorum. Kod yazımı daha kısa tek satırda diye.  Genel mantığı koşul doğru ise ( ?) işaretinden sonrakini yanlışssa ( :) işaretinden sonraki durumu  gösterir.  Değerleri bloolendir. Birkaç üçlü ifadeyide bir araya getirebilirsiniz.

condition ? expressionIfTrue : expressionIfFalse

Şimdi şöyle bir örnek yapalım. İnputtan sayı gireceğiz. 18 den büyükse giriş yapabilirsin değilse de giriş yapamaz kontrolünü yapalım.  Değerler ilk basta boş olduğunda da giriş yap butonu gözükecek. Böylece birden fazla koşuluda birleştirmiş olacağız.

 

const inputStyle = {
  width: 235,
  margin: 5
}

class CheckUserAge extends React.Component {
  constructor(props) {
    super(props);
    this.state={
      userAge: '',
      input: '',
    }
    this.submit = this.submit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(e) {
    this.setState({
      input: e.target.value,
      userAge: ''
    });
  }
  submit() {
    this.setState(state => ({
      userAge: state.input
    }));
  }
  render() {
    const buttonOne = <button onClick={this.submit}>Gönder</button>;
    const buttonTwo = <button>sen girebilirsin</button>;
    const buttonThree = <button>Yaşın tutmuyor büyüde gel</button>;
    return (
        <div>
          <h3>Yaşınızı girin</h3>
          <input
              style={inputStyle}
              type="number"
              value={this.state.input}
              onChange={this.handleChange} /><br />
          {
            this.state.userAge == '' ?
                buttonOne : this.state.userAge >=18 ?
                buttonTwo : buttonThree

          }
        </div>
    );
  }
};

 

Bir cevap yazın