试图根据选定的选项显示字段

我有团队和竞争的注册部分，但是我想要做的是当用户select比赛时，我想显示促销代码字段，并且只有在select了比赛时显示该字段，如果select了团队，它将不会显示促销领域，谢谢提前。

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

仅当状态的types包含“竞争”时才有条件地呈现文本字段“促销代码”：

围绕领域与{ condition ? <YourField.../> : null } { 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}