代码之家  ›  专栏  ›  技术社区  ›  Uğur Kaya

在React中参数化事件处理程序

  •  0
  • Uğur Kaya  · 技术社区  · 8 年前

    我在用 https://github.com/olahol/react-tagsinput 用于在我的应用程序中创建标记的库当我试图将renderTag属性绑定到自定义函数时,会发生非常奇怪的事情我想我遗漏了一点与JavaScript相关的内容,而不是react。

    即使typeof标记类型在组件上返回'string',当我试图呈现它时,它会呈现[object object]| hello为什么要渲染对象?

      defaultRenderTag = (customProps, props) => {
    let { tag, key, disabled, onRemove, classNameRemove, getTagDisplayValue, ...other } = props
    let { tagType } = customProps;
    
    // This returns 'string'
    console.log(typeof tagType)
    
    return (
      <span key={key} {...other}>
        {/* The type of the tag: */}
        {
          tagType ? (
            // This returns "[object Object] | work"
    
            <span className="react-tagsinput-tagtype"> {tagType} </span> + ' | '
          ) : null
        }
        {getTagDisplayValue(tag)}
        {!disabled &&
          <a className={classNameRemove} onClick={(e) => onRemove(key)} />
        }
      </span>
    )
    

    }

    这是我使用上述功能的主要组件:

     <TagsInput
          ...
          renderTag={this.defaultRenderTag.bind(this, { tagType: 'personal' })}
          ...
     />
    
    1 回复  |  直到 8 年前
        1
  •  2
  •   Swati Anand    8 年前

    因为您在JSX中使用字符串连接 <span className="react-tagsinput-tagtype"> {tagType} </span> + ' | ' ,和 <span>...</span> 打印为[对象对象]您可以尝试以下替代方案:

    return (
      <span key={key} {...other}>
        {
          tagType && <span className="react-tagsinput-tagtype"> {`${tagType} | `} </span>
        }
        {getTagDisplayValue(tag)}
        {!disabled &&
          <a className={classNameRemove} onClick={(e) => onRemove(key)} />
        }
      </span>
    )