Reactjs - 根据传递的属性选择具有不同第一个选项的框

问题描述 投票:0回答:1

我试图根据我传递的属性显示不同的第一个选项。

在搜索页面中,我希望用户能够选择“任意”选项。

在编辑个人资料页面中,不应显示“任何”选项,因为这仅适用于搜索。

编辑个人资料页面

<option value="0" disabled selected>
    Select Religion
</option>

搜索页面

<option value="Any" selected>
    Any Religion
</option>

搜索个人资料页面有以下代码:

import React, { Component } from 'react'
..
import ReligionInput from '../edit-profile/religion-input'
..
..
<ReligionInput value={religion} change={this.changeReligion} any="Y" />
...

并且ReligionInput检查是否有== Y但是它不起作用并且始终具有Any选项。下面的代码有什么问题?

import religionOptions from './religion-options'

const InputReligion = ({ value, change, any }) => (
  <div className="edit_religion_div">
    <Select
      placeholder="Select option"
      value={value}
      valueChange={e => change('religion', e)}
      className="edit_religion my2"
    >
    {any} == 'Y' ?
  `<option value="Any" selected>
    Any Religion
  </option>` :
  `<option value="0" disabled selected>
    Select Religion
  </option>`
      {religionOptions.map((e, key) => {
        return <option key={key} value={e.value}>{e.name}</option>;
       })}
    </Select>
  </div>
)

InputReligion.propTypes = {
  value: PropTypes.string.isRequired,
  change: PropTypes.func.isRequired,
}

所有其他选项都来自religionOptions。

reactjs
1个回答
0
投票

这样做会很脏。

<option value={ any=='Y' ? '0' : 'Any' } selected>{ any=='Y' ? 'select' : 'any religion' }</option>

是的,也不是那些条件的忠实粉丝。更清晰,更易读的方法是:

const InputReligion = (props) => {
    let defaultOption = null;
  if (props.any == 'Y' ) {
    defaultOption = <option value='Any' selected>Any religion</option>
  } else {
    defaultOption = <option value='0' selected disabled>Select Religion</option>
  }

  return (
    <div className="edit_religion_div">
      <select placeholder="Select Option"
        className="edit_religion my2"
        value={ props.value }
        valueChange={ e => change('religion', e)}
        >
        { defaultOption }
        {
            religion.map( (e, key) => {
            return <option key={ key } value={ e.value }>{ e.name }</option>
          })
        }
      </select>
    </div>
  )
}
© www.soinside.com 2019 - 2024. All rights reserved.