React问题笔记

发表于 更新于 分类于

1.this 作用域处理方案

问题背景：手动触发事件，更改state中数据

  1. 箭头表达式
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    mergeFilter(_this) {
      let store = [];
      if (!_this.state.merge) {
        store = _this.mergetIndexName(this.state.indices, /[^a-z]+$/);
      } else {
        store = _this.reBuildOriginData(this.state.indices);
      }
      _this.setState({
        store: store,
        merge: !_this.state.merge,
      });
    }
    render组件中调用 
    1
    2
    3
    4
    5
    6
    7
    8
    <EuiSwitch
            label="Merge"
            key="MergeEuiSwitch"
            checked={
              this.state.merge
            }
            onChange={()=>this.mergeFilter(this)}
    />
  2. bind
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
     constructor(props) {
       super(props);
       this.state = {value: 'coconut'};

       this.handleChange = this.handleChange.bind(this);
     }

     handleChange(event) {
       this.setState({value: event.target.value});
     }
     
    render() {
       return (
         <form onSubmit={this.handleSubmit}>
           <label>
             Pick your favorite flavor:
             <select value={this.state.value} onChange={this.handleChange}>
               <option value="grapefruit">Grapefruit</option>
               <option value="lime">Lime</option>
               <option value="coconut">Coconut</option>
               <option value="mango">Mango</option>
             </select>
           </label>
           <input type="submit" value="Submit" />
         </form>
       );
     }

参考

1.he-select-tag