javascript - 尝试根据所选选项显示字段

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

仅当州类型包含“COMPETITION”时，才有条件地呈现文本字段“Promo Code”:

用 { 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}