Question

当此React组件中有mouseOver或mouseEnter事件时，我想将子元素的显示属性设置为内联。

我可以看到正在设置状态，但是对于display属性，它并没有改变。

export class EditablePageTitle extends React.Component {
  state = {
    showEditIcon: 'none'
  };

  showEditIcon() {
    console.log('showEditIcon 1 ', this.state.showEditIcon);
    this.setState({ showEditIcon: 'inline' });
    console.log('showEditIcon 2 ', this.state.showEditIcon);
  }

  render() {
    return (
      <FlexColumn
        style={{
          alignItems: 'baseline',
          paddingBottom: s[3]
        }}
      >
        <div id="page-title" onMouseEnter={() => this.showEditIcon()}>
          <Input
            {...this.props}
            type={this.props.type || 'text'}
            defaultValue={this.props.defaultValue}
            disabled="disabled"
            onChange={this.props.onChange}
          />
          <i
            className="fa fa-pencil-alt"
            style={{
              paddingRight: s[3],
              color: '#FFFFFF',
              fontSize: s[3],
              display: this.state.showEditIcon
            }}
          />
          {console.log('this.state.showEditIcon ', this.state.showEditIcon)}
        </div>
        <Label>{this.props.label}</Label>
      </FlexColumn>
    );
  }
}

Answer 1

按如下所示调用showEditIcon方法，并且还应绑定this：

export class EditablePageTitle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showEditIcon: 'none'
    };

    this.showEditIcon = this.showEditIcon.bind(this);
  }

    showEditIcon() {
        console.log('showEditIcon 1 ', this.state.showEditIcon);
        this.setState({ showEditIcon: 'inline' });
        console.log('showEditIcon 2 ', this.state.showEditIcon);
    }

  render() {
    return (
      <FlexColumn
      style={{
        alignItems: 'baseline',
        paddingBottom: s[3]
      }}
      >
      <div id="page-title" onMouseEnter={this.showEditIcon}>
        <Input
        {...this.props}
        type={this.props.type || 'text'}
        defaultValue={this.props.defaultValue}
        disabled="disabled"
        onChange={this.props.onChange}
        />
        <i
        className="fa fa-pencil-alt"
        style={{
          paddingRight: s[3],
          color: '#FFFFFF',
          fontSize: s[3],
          display: this.state.showEditIcon
        }}
        />
        {console.log('this.state.showEditIcon ', this.state.showEditIcon)}
      </div>
      <Label>{this.props.label}</Label>
      </FlexColumn>
    );
  }
}

Answer 2

这可能与Font Awesome和React处理渲染方式有冲突。

如果您使用React，我们建议使用CSS的react-fontawesome软件包或Web字体。

https://fontawesome.com/how-to-use/on-the-web/using-with/react

但是，您可能只想尝试用span包装图标并在其中应用display属性。

<span style={{ display: this.state.showEditIcon }}>
    <i className="fa fa-pencil-alt"
        style={{
            paddingRight: s[3],
            color: '#FFFFFF',
            fontSize: s[3]
        }}
    />
</span>

ReactJS在onMouseOver上设置display ='inline'

2 个答案: