React & event-pooling & bug

React & event-pooling & bug

event-pooling

https://reactjs.org/docs/events.html#event-pooling
https://reactjs.org/docs/events.html#mouse-events
https://reactjs.org/docs/events.html#form-events

old

// old

    result = (
        <Input
            // unique key
            key={type}
            value={Filter_Value} 
            onChange={that.onFilterValueChange}
            // onChange={(e) => that.onFilterValueChange}
            placeholder={placeholder}
        />
    );

new

// new
    result = (
        <Input
            // unique key
            key={type}
            value={Filter_Value} 
            onChange={(e) => that.onFilterValueChange(e)}
            // onChange={(e) => that.onFilterValueChange}
            placeholder={placeholder}
        />
    );

bug

react & Warning: This synthetic event is reused for performance reasons.

https://stackoverflow.com/questions/49500255/warning-this-synthetic-event-is-reused-for-performance-reasons-happening-with

binding bug & event Bubble ???

// 1. change below
onChange={this.handleCheckbox}
// to
onChange={() => this.handleCheckbox}

// 2. If that won't work, in 'handleCheckbox' add this line
handleCheckbox = (event) => {
      event.persist();
      this.setState({
            isChecked: !this.state.isChecked
      });
};

I think the is that when using an array.map() function will create many same items if the item without a unique key, React couldn't tell which one child triggered the event, so it may be coursed a crash. Therefore, using ES6 arrow function will auto bind this to the unique one item.

我认为, 当使用 "array. map ()" 函数将创建许多相同的项目, 如果没有唯一的键的项目, 反应无法判断哪个孩子触发了事件, 所以它可能会导致崩溃。 因此, 使用 es6 箭头函数将自动绑定 "此" 到唯一的一个项目。

solutions

https://www.duncanleung.com/blog/2017-08-14-fixing-react-warnings-synthetic-events-in-setstate/
https://stackoverflow.com/questions/42089795/reactjs-cant-set-state-from-an-event-with-event-persist