Question

如何概括这两个函数以在相同的div中使用？

showNotifyText = () => {
 const { showNotifyText } = this.state;
 this.setState({ showNotifyText: !showNotifyText });
};
showRoutineAvailabilityText = () => {
 const { showRoutineAvailabilityText } = this.state;
 this.setState({ showRoutineAvailabilityText: !showRoutineAvailabilityText });
};

Answer 1

在this.state中使用setState是反模式，因为setState is asynchronous。如果新状态是从前一个状态派生的，则应使用setState函数。

它可以是通用方法：

toggleStateProperty = key => {
  this.setState(state => ({ [key]: !state[key] }));
};

或更高级的功能：

toggleStatePropertyFactory = key => function () {
  this.setState(state => ({ [key]: !state[key] }));
};

...

toggleShowNotifyText  = toggleStatePropertyFactory('showNotifyText');

toggleRoutineAvailabilityText = toggleStatePropertyFactory('showRoutineAvailabilityText');

如果该方法应作为回调传递，则第二个选项是更可取的，因为它已将方法绑定到特定键：

<div onclick={this.toggleShowNotifyText}/>

vs

<div onclick={() => this.toggleStateProperty('showNotifyText')}/>

Answer 2

要概括该方法，您可以尝试将状态键作为数据添加到模板中，然后在事件处理程序中读取它：

onClick = (event) => {
  const key = event.target.dataset.key;
  const value = this.state[key];
  this.setState({ [key]: !value });
}

render() {
  return (
    <div>
      <div onClick={this.onClick} data-key="showRoutineAvailabilityText">click</div>
    </div>
  );
}

泛化功能以与不同元素一起重用

2 个答案: