選択したオプションに基づいてフィールドを表示しようとしています

Question

私はチームと競争のためのサインアップパートを持っていますが、私がしようとしているのはユーザーが競争を選択したときです。チームが選択された場合は競技が選択され、事前にhepのおかげでプロモーションフィールドは表示されません。

 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

状態のタイプは「COMPETITION」が含まれている場合にのみ条件付きテキストフィールド「プロモーションコードを」レンダリング：{ 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}