Question

在下拉菜单中，我有两个选择，是或否我希望一个组件在用户选择“是”时渲染，而另一个组件在用户选择“否”时渲染。我也想在刷新页面时，页面上不显示任何选项

我如何实现我的目标？我在下面共享我的代码

Here is the dropdown fields, 
const CustomTimings=[
  {label:'Yes', value: 1},
  {label:'No', value: 2}
]

const DateAndTime = () => (
      <div>
        {CustomTimings === 'Yes'
        ? <CustomeTimeYes />
        : <CustomeTimeNo />
    }
return
<div className="input-field">
            <div class="row">
              <div class="col-4">
              <label htmlFor="customerype">Customer Type</label><br />
              <Select options={CustomerType} onChange={this.handleChangeCT} value={this.state.CustomerType} />
              </div>
              <div class="col-4">
              <label htmlFor="learning">Do you have custom timings</label><br/>
              <Select options={CustomTimings} onChange={this.handleChangeCTime} value={this.state.CustomTimings} />
              </div>
            </div>
          </div><br />
          <div>
          {DateAndTime()}
          <br />
          </div>

有人可以在这里解释我做错了什么吗，要么显示了这两个组件，要么显示了任何一个，并且在刷新时没有更改

Answer 1

您可以使用conditional rendering，在呈现组件之前检查特定条件。

render() {
const { value } = this.state;

return (
   <div>
       {value === 'dropdown' && <Component1>...</Component1>}
       {value === 'text' && <Component2></Component2>}
       {value === 'checkboxes' && <Component3></Component3>}
       ...
   </div>
  )
}

如何使用reactJS根据下拉选择更改表单字段

1 个答案: