試圖根據選定的選項顯示字段

Question

我有團隊和競爭的註冊部分，但我想要做的是當用戶選擇競爭時我試圖顯示促銷代碼字段，該字段將只顯示時如果選擇了團隊，則選擇競賽，但不會顯示促銷領域，這要感謝提前預覽。

 React.Component { 
      constructor(props) { 
      super(props); 
      this.state = {name: '', email: '', password: ''}; 
      } 

      handleChange(event) { 
      this.setState({ [event.target.name]: event.target.value }); 
      } 

      handleSelect(event, index, value) { 
      this.setState({type: value}); 
      } 

      handleSignup(event) { 
      event.preventDefault(); 
      this.props.dispatch(signup(this.state.name, this.state.email, this.state.password, this.state.promo, this.state.type)); 
      } 



      render() { 
      return (
       <div className="login"> 
       <div className="panel"> 
        <div className="body"> 
        <legend>Create an account</legend> 
        <SelectField 
         floatingLabelText="User or Admin" 
         value={this.state.type} 
         name="type" id="type" 
         onChange={this.handleSelect.bind(this)} 
        > 
         <MenuItem value={"USER"} primaryText="User" /> 
         <MenuItem value={"ADMIN"} primaryText="Admin" /> 
        </SelectField> 

        <TextField 
         hintText="Promo Code" 
         name="promo" id="promo" autoFocus 
         value={this.state.code} onChange={this.handleChange.bind(this)} 
         floatingLabelText="Promo Code" 
        /> 

Answer 1

呈現文本字段「促銷代碼」有條件只有當國家的種類中，「競爭」：

環繞聲場與{ condition ? <YourField.../> : null }：

{this.state.type === 'COMPETITION' 
     ? <TextField 
      hintText="Promo Code" 
      name="promo" id="promo" autoFocus 
      value={this.state.code} onChange={this.handleChange.bind(this)} 
      floatingLabelText="Promo Code" 
     /> 
     : null}