Office UI Fabric 应该如何实现悬停效果？答案

【问题标题】：How should be hover effects be done with Office UI Fabric?Office UI Fabric 应该如何实现悬停效果？
【发布时间】：2018-10-23 12:24:00
【问题描述】：

使用 Office UI Fabric 实现悬停（将鼠标移到某物上）效果的正确方法是什么？

例如我有一个按钮，如果我将鼠标移到它上面，文本应该从“按钮”->“悬停”改变？

<DefaultButton
            data-automation-id="test"
            text="Button"
          />

或者我有带图标的按钮，我想在悬停时将图标更改为另一个？

<DefaultButton iconProps={{ iconName: 'Pin' }}>Text</DefaultButton>;

【问题讨论】：

标签： typescript office-ui-fabric

【解决方案1】：

要更改悬停按钮的文本，您必须首先将按钮文本移动到父组件的状态：

class App extends React.Component<any, any> {
  state = {
    buttonText: "Button"
  };

  render() {
    const { buttonText } = this.state;

    return (
      <Fabric>
        <h1>Change text on hover</h1>
        <DefaultButton text={buttonText} />
      </Fabric>
    );
  }

  ...

然后您可以添加一个函数来更改按钮文本：

onHover = () => {
  this.setState({
    buttonText: "Hovering!"
  });
};

并将其连接到按钮的onMouseOver 属性：

<DefaultButton text={buttonText} onMouseOver={this.onHover} />

当您将鼠标悬停在按钮上时，它将触发onHover 函数，为buttonText 设置一个新值。然后 React 将重新渲染组件并将此文本发送到 DefaultButton。

您可以在此 CodeSandbox 中看到它的实际效果：https://codesandbox.io/s/7zpkz3nr8x

【讨论】：