recyclejs / recycle

Convert functional/reactive object description using RxJS into React component

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

sources.className doesn't work if selected element has multiple classes

mihaisavezi opened this issue · comments

commented

If I have multiple classes on the node on which I want to attach the listener and I want to select it by one of its classes, it won't work. Is this expected?

const Timer = recycle({
  initialState: {
    secondsElapsed: 0,
    counter: 0
  },

  update(sources) {
    debugger;
    return [
      sources
        .selectClass("not-working")
        .addListener("onClick")
        .reducer(function(state) {
          debugger;
          state.counter++;
          return state;
        }),

      Rx.Observable.interval(1000).reducer(function(state) {
        state.secondsElapsed++;
        return state;
      })
    ];
  },

  view(props, state) {
    return (
      <div>
        <div>
          Seconds Elapsed: {state.secondsElapsed}
        </div>
        <div>
          Times Clicked: {state.counter}
        </div>
        <button className="not-working f5 avenir link dim ph4 pv3 mb2 mt4 dib white">
          Click Me
        </button>
      </div>
    );
  }
});

Yes, this is expected.

This is also covered in FAQ:

Can I use CSS selectors?
No.
Since Recycle doesn't query over your nodes, selectors like div .class will not work

Recycle is just a wrapper around a React component and enabling this would require a lot of changes in how React itself is rendering components.

So you should either use some unique selector or a classical react component.