Question

我使用ReactJs和react-fa来访问Font Awesome图标。我需要动态地将其中一个图标放在文本输入中。

这是我的代码：

    import React, { Component } from 'react';
    import PropTypes from 'prop-types';
    import { Icon } from 'react-fa';

    import '../index.css';

    class SearchInput extends Component {

        static propTypes = { 
          onKeyUp: PropTypes.object,
          placeholder: PropTypes.placeholder,
          iconName: PropTypes.string
        };


        handleKeyUp = (content) => {

            console.log(content);

        }

        render() {

                let icon = <Icon name={this.props.iconName} />;

                let extra = {
                    backgroundImage: icon
                }

                return (
                    <input className='ux-search-input' style={extra} type='text' onKeyUp={this.handleKeyUp} placeholder={this.props.placeholder} />
                    );
        }
    };

    export default SearchInput;

这不起作用 - 根本没有图标。修复在这种情况下我没有匹配的URL，因为icon变量将是ReactJs组件。

Answer 1

react-fa是一个React组件，它呈现为<i class="fa fa-name" />之类的html，因此您不能将其用作样式。你应该使用这样的东西：

      return (
          <span>
             { icon }
             <input className='ux-search-input' style={extra} type='text' onKeyUp={this.handleKeyUp} placeholder={this.props.placeholder} />
          </span>
          );

并添加一些样式以匹配正确的图标位置。

Answer 2

尝试在输入字段前使用常规图标标记，然后使用css将图标移动到适当的位置，而不是使用React组件。

例如：

JSX：

<i class={this.props.iconName} id="icon" />

CSS：

#icon {
  // Adjust margins and position to fit the input background
  margin-left: 30px;
}

使用React和react-fa在输入文本背景上动态放置Font Awesome图标

2 个答案: