reactjs - 如何将 if 条件放入选择值中？使用本机反应

Question

如何将 if 条件放入value={displaySelectedDocument}中，如果displaySelectedDocument为空，则该值将自动为 1。

<Select 
    isSearchable
    options={docsClass}
    className={classes.selection}
    value={displaySelectedDocument}
    onChange={(itemValue) => {
         setDisplaySelectedDocumentn(itemValue)
         setFieldValue("documentId",itemValue.value)
    }}
    name='documentId'/>

更新

我试过这个

value={displaySelectedDocument !== null ? displaySelectedDocument : 1} // I also tried 0 and "" but it didnt work

我试图console.log(displaySelectedDocument)结果是{}

标签： reactjsreact-native

Answer 1

<Select 
    isSearchable
    options={docsClass}
    className={classes.selection}
    value={displaySelectedDocument || 1}
    onChange={(itemValue) => {
         setDisplaySelectedDocumentn(itemValue)
         setFieldValue("documentId",itemValue.value)
    }}
    name='documentId'/>

如果 displaySelectedDocument 可以采用虚假值（例如 0）并且仍然有效

<Select 
    isSearchable
    options={docsClass}
    className={classes.selection}
    value={displaySelectedDocument !== null ? displaySelectedDocument : 1}
    onChange={(itemValue) => {
         setDisplaySelectedDocumentn(itemValue)
         setFieldValue("documentId",itemValue.value)
    }}
    name='documentId'/>

如果您还想确保 displaySelected 不是一个空对象，最好创建一个变量以避免使您的代码看起来很复杂

这是不制作 var 的样子

<Select 
    isSearchable
    options={docsClass}
    className={classes.selection}
    value={displaySelectedDocument !== null ? displaySelectedDocument !== null ? Object.keys(displaySelectedDocument).length > 1 ? displaySelectedDocument : 1:1}
    onChange={(itemValue) => {
         setDisplaySelectedDocumentn(itemValue)
         setFieldValue("documentId",itemValue.value)
    }}
    name='documentId'/>

这有点难以阅读和理解。但是如果你在返回 JSX 之前创建了一个 var，它更容易阅读：

const isValidDoc = displaySelectedDoc !== null && 
  Object.keys(displaySelectedDoc).length > 1
return (
  {/*other JSX*/}
  <Select 
    isSearchable
    options={docsClass}
    className={classes.selection}
    value={ isValidDoc ? displaySelectedDocument : 1}
    onChange={(itemValue) => {
         setDisplaySelectedDocumentn(itemValue)
         setFieldValue("documentId",itemValue.value)
    }}
    name='documentId'/>
)