Question

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

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

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

还是我有带有图标的按钮，是否想在发生悬停时将图标更改为另一个图标？

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

Answer 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

Office UI Fabric应该如何完成悬停效果？

1 个答案: