Question

我试图用与在语义UI反应代码中使用的相同功能成功地表达语义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>

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

<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示例，这样您就可以看到如何声明一个类方法处理函数并将其与click事件一起使用。注意，这里没有构造函数或onClick事件上要绑定的箭头函数吗？那是因为绑定发生在类方法上。 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.

将Semantic-Ui-React转换为Semantic-UI；事件处理程序

1 个答案: