将图标从fontaweslyicon上的功能（on Change文本输入）更改

Question

我正在考虑根据之前的用户交互更改使用 fontawesome-react 包设置的图标。

用户在屏幕上有一个输入字段和按钮（其中包含一个图标）。如果输入为空，则

会显示不同的图标无用户输入：

+-----------------------+-----------+
| Search Placeholder... | (Shuffle) |
+-----------------------+-----------+

用户输入：

+-----------------------+-----------+
| Value                 | (Search)  |
+-----------------------+-----------+

在 内手动设置图标时， 我能够找到faSearch，但是当使用状态设置它时，我收到错误：

Could not find icon {prefix: 'fas', iconName: 'faSearch'}

这是我到目前为止的看法。如果有人能够提供帮助并能够解释我所缺少的内容，我会非常高兴。

class Search extends React.Component {

  state = {
    displayIcon: "faSearch",
  }
  
  onChange(event) {
    console.log(event.target.value)

    if(event.target.value === ''){
      this.setState({
        displayIcon: "faShuffle",
      })
    } else {
      this.setState({
        displayIcon: "faSearch",
      })
    }
  }

  render(){
    const { displayIcon } = this.state //destucture state

    console.log( );
    return (
      <>
      
        <InputGroup className="mb-3">
        <FormControl
          placeholder="search or feel lucky..."
          onChange={this.onChange}
        />

        <Button variant="primary" id="search" size="lg">
          <FontAwesomeIcon icon={displayIcon} />
        </Button>

        </InputGroup>
      </>
    )
  }

}

Answer 1

您也可以这样做并有条件地渲染它：

class Search extends React.Component {
  state = {
    value: '',
  };

  onChange(event) {
    this.setState({
      value: event.target.value,
    });
  }

  render() {
    const { value } = this.state; //destucture state

    return (    
        <InputGroup className='mb-3'>
          <FormControl placeholder='search or feel lucky...' onChange={this.onChange} />

          <Button variant='primary' id='search' size='lg'>
            {value ? <FontAwesomeIcon icon={faSearch} /> : <FontAwesomeIcon icon={faShuffle} />}
          </Button>
        </InputGroup>
    );
  }
}

Answer 2

也许您可以尝试为 fa-search 传递一个字符串，而不是传递一个对象，如下所示：

onChange 中的实现是：

if(event.target.value === ''){
      this.setState(
        'fa fa-shuffle', // don't know this one check it on https://fontawesome.com/v5/icons/random?s=solid
      )
    } else {
      this.setState(
        'fas fas-search'
      )
    }