Question

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

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

在编辑配置文件页面中，不应显示“任何”选项，因为这仅用于搜索。

编辑个人资料页面

<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,
}

所有其他选项都来自ligiousOptions。

Answer 1

这样做是一种肮脏的方式。

<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>
  )
}

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

1 个答案: