Question

我是React的新手，我对条件陈述有疑问。如何在满足特定条件时显示文本框？

例如：当问题出现时，＆＃34;您是否带来了客人？＆＃34;，如果他们点击了“是”，那么“来宾姓氏和姓氏”＃34;文本框出现，但如果没有选择单选按钮或者“不”，则会隐藏它。电台bttn被选中。

这是我RSVP form的代码笔。

任何帮助表示赞赏！谢谢！

render: function() {
    return (
        <form className="rsvpForm" onSubmit={this.handleSubmit}>
            <fieldset>
                <legend>Are you attending?</legend>
                <div className="mui-checkbox">
                <label>
                        <input type="radio" name="rsvpResponse" value="1" checked={this.state.rsvpyes} onChange={this.handleRsvpYesChange} />
                        <span>Yes</span>
                </label>
                <label>
                        <input type="radio" name="rsvpResponse" value="0" checked={this.state.rsvpno} onChange={this.handleRsvpNoChange} />
                        <span>No</span>
                </label>
                </div>
            </fieldset>
            <div className="mui-textfield mui-textfield--float-label">
                <input type="text" value={this.state.name} onChange={this.handleNameChange} />
                <label htmlFor="name">First and Last Name</label>
            </div>
            <div className="mui-textfield mui-textfield--float-label">
                <input type="text" value={this.state.email} onChange={this.handleEmailChange} />
                <label htmlFor="email">Email Address</label>
            </div>
            <fieldset>
                <legend>Are you bringing a guest?</legend>
                <div className="mui-checkbox">
                <label>
                        <input type="radio" name="rsvpGuest" value="1" checked={this.state.done || this.props.done} onChange={this.handleGuestYesChange}  />
                        <span>Yes</span>
                </label>
                <label>
                        <input type="radio" name="rsvpGuest" value="0" checked={this.state.done || this.props.done} onChange={this.handleGuestNoChange}  />
                        <span>No</span>
                </label>
                </div>
            </fieldset>
            <div className="mui-textfield mui-textfield--float-label">
                <input type="text" value={this.state.guest} onChange={this.handleGuestChange} />
                <label htmlFor="guest">Guests First and Last Name</label>
            </div>
            <p><input type="submit" value="RSVP" className="mui-btn mui-btn--primary" /></p>
        </form>
    );
}
});

Answer 1

应该可以通过在单独的函数中移动客户详细信息的位来执行此操作：

renderGuestDetails: function() {
    return (
        <div className="mui-textfield mui-textfield--float-label">
            <input type="text" value={this.state.guest} onChange={this.handleGuestChange} />
            <label htmlFor="guest">Guests First and Last Name</label>
        </div>
    );
}

然后根据状态渲染：

{this.state.guestyes ? this.renderGuestDetails() : null;}

另外，看看你的codepen，你可能会稍微简化你的状态。而不是所有的是/否组合变量，将它们分别放在一个：

{ rvsp, guest }

每个类型bool，只使用true / false作为包括guest＆amp; rsvping。

React / Babel如何在单选按钮中添加逻辑？

1 个答案: