将语义-Ui-React 转换为语义-UI；事件处理器

Question

我正在尝试使用我在 Semantic-UI-react 代码中使用的相同功能成功表达 Semantic-UI 代码。任何帮助将不胜感激。

这是我的：

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>

Preview组件中编写的代码是专门为转换Demo组件内部编写的代码而编写的。演示组件应转换为如下所示：

<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 函数没有出现在实际输出中的第一个按钮上。我在演示组件内部的 Semantic-UI-React 代码的顶部做错了吗？

Answer 1

您设置处理函数的方式不正确。您还在构造函数中进行了绑定，并在按钮的 onClick 事件中内联了一个箭头函数。只需要绑定一处即可。

看看我制作的 codesandbox 示例，这样您就可以了解如何声明 class 方法处理函数并将其与单击事件一起使用。请注意，这里没有构造函数或箭头函数来绑定 onClick 事件？那是因为绑定发生在 class 方法上。 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.

将语义-Ui-React 转换为语义-UI；事件处理器

Converting Semantic-Ui-React to Semantic-UI; event handler

semantic-ui

semantic-ui-react