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}

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

1 个答案: