代码之家 › 专栏 › 技术社区 › flo527

将语义用户界面转换为语义用户界面;事件处理程序

semantic-ui-react semantic-ui

flo527 · 技术社区 · 7 年前

我正试图用我在语义用户界面反应代码中使用的相同函数成功地表达语义用户界面代码。任何帮助都将不胜感激。

这就是我所拥有的:

class Preview extends React.Component {   
 componentDidMount() {
   const update = () => {
     this.dest.textContent = this.src.innerHTML.replace(/</g, 
     '\n<');
   };
   setInterval(update, 300);
   update();   
 }

 render() {
  return (
   <div>
     <div ref={(src) => Object.assign(this, { src })}>
       <Demo />
     </div>
     <pre ref={(dest) => Object.assign(this, { dest })}>
     </pre>
   </div>
  )   
 } 
}

export class Demo extends Component {   constructor(){
  super();
  this.localStorageClear.bind(this);   }

  localStorageClear = (e) => {
    e.preventDefault();
    window.localStorage.clear();   
    };

  render() {
     return (

   <div id = "soundcloud-player">
     <Container className='col'>
      <div className='col-left js-playlist toggle'>
        <div className='inner'>
        </div>
      </div>
      <div className='col-right'>
        <div className = 'main'>
          <Input size='massive' icon='search' input = {{ className: 
          'input-search js-search' }} placeholder='Search for a song
           or artist...'/>
          <Icon className='js-submit'/>
          <Button onClick={(e) => this.localStorageClear(e)} 
            className='clear' content='Clear Playlist'/>
          <Button content='Show/Hide Playlist' id='toggle' 
           className='hide-toggle'/>
          <Card className='js-search-results search-results'/>
        </div>
      </div>
    </Container>
  </div>

在预览组件中编写的代码专门用于转换在演示组件中编写的代码。演示组件应转换为如下所示:

<div class="ui container col">
    <div class="col-left js-playlist toggle">

      <div class="inner">

      </div>

    </div>

<div class="col-right">
  <div class="main">

    <div class="ui massive icon input">
      <input placeholder="Search for a song or artist..." class="js-search input-search">

      <i class="search icon js-submit"></i>

    </div>
    <button onclick="localStorageClear();" class="clear">Clear Playlist</button>
    <button class="hide-toggle" href="#" id="toggle">Show/Hide Playlist</button>


    <div class="search-results js-search-results ui cards">

    </div>

  </div>
</div>

顶部代码的实际输出为:

<div id="soundcloud-player">
  <div class="ui container col">
    <div class="col-left js-playlist toggle">
      <div class="inner">
      </div>
    </div>
    <div class="col-right">
        <div class="main">
          <div class="ui massive icon input input-search">
            <input placeholder="Search for a song or artist..." type="text">
            <i aria-hidden="true" class="search icon">
            </i>
          </div>
          <i aria-hidden="true" class="icon js-submit">
          </i>
          <button class="ui button clear" role="button">Clear Playlist
          </button>
          <button id="toggle" class="ui button hide-toggle" role="button">Show/Hide Playlist
          </button>
          <div class="ui card js-search-results search-results">
          </div>
        </div>
    </div>
  </div>
</div>

我试图弄明白为什么实际输出中的第一个按钮没有显示localstorageclear函数。我在演示组件内部的语义用户界面反应代码的顶部做的是否有错?

1 回复 | 直到 7 年前

brianespinosa 7 年前

设置处理程序函数的方式不正确。您还可以在构造函数中绑定,并在按钮的onclick事件内部嵌入一个箭头函数。你只需要在一个地方装订。

看一看我做的代码沙盒示例,这样您就可以看到如何声明一个类方法处理程序函数并将其与click事件一起使用。注意,这里没有要绑定onclick事件的构造函数或arrow函数吗?这是因为绑定发生在类方法上。 handleClick = () => {}

class App extends React.Component {
  handleClick = e => {
    console.log(e.target + " was clicked.");

    // Do whatever functionality you need here.
    // In your example you do not show that it matters what the element is,
    // so you don't need to pass the event (e) into your class method.
  };

  render() {
    return (
      <Container>
        <Divider hidden />

        <Button content="Click Me" onClick={this.handleClick} />

        <Divider hidden clearing />

        <Message info>
          Look in your console and you will see that the click function is
          working.
        </Message>
      </Container>
    );
  }
}

Here is a working codesandbox example.