如何为 React Native 中的 setState 切换通用处理程序答案

【问题标题】：How do I make a generic handler for Toggle for setState in React Native如何为 React Native 中的 setState 切换通用处理程序
【发布时间】：2019-09-14 19:20:13
【问题描述】：

我想为 setstate 创建一个通用处理程序，而不是拥有两个不同的处理程序？我怎样才能做到这一点？

我在想这样的事情：

  setStateHandler= (stateToBeChanged) =>{
    this.setState({
      stateToBeChanged: !this.state.stateToBeChanged
    });
  }

  handleHappyToggle = () =>{
    this.setState({
      Happy: !this.state.Happy
    });
  }

  handleSadToggle = () => {
    this.setState({
      Sad: !this.state.Sad
    });
  }

我的两个可触摸不透明度：

<TouchableOpacity
onPress={this.handleHappyToggle}
>
<Text> {this.state.happy ? 'Yes' : 'No' } </Text>
</TouchableOpacity>

<TouchableOpacity
onPress={this.handleSadToggle}
>
<Text> {this.state.sad? 'Yes' : 'No' } </Text>
</TouchableOpacity>

【问题讨论】：

标签： reactjs react-native native

【解决方案1】：

编辑： 添加了演示 StackSnippet...

编辑 2： 添加了 3 种“通用”处理方法

您可以使用通用处理程序来完成此操作 - 只需提供“情绪”作为参数。

handleMoodToggle = mood => event => {
    if(!["Happy", "Sad"].includes(mood)){
        return null;
    }
    this.setState({
        [mood]: !this.state[mood]
    })
}

<TouchableOpacity onPress={this.handleMoodToggle("Happy")}>
    <Text> {this.state.happy ? 'Yes' : 'No'} </Text>
</TouchableOpacity>
<TouchableOpacity onPress={this.handleMoodToggle("Sad")}>
    <Text> {this.state.sad ? 'Yes' : 'No'} </Text>
</TouchableOpacity>

演示：

const { Component } = React;
const { render } = ReactDOM;

class App extends Component {
  state = {
    Happy: true,
    Sad: false
  };

  handleMoodToggle1 = mood => event => {
    if (!["Happy", "Sad"].includes(mood)) {
      return null;
    }
    this.setState({
      [mood]: !this.state[mood]
    })
  };
  
  handleMoodToggle2 = event => {
    this.setState({
      [event.target.innerHTML]: !this.state[event.target.innerHTML]
    });
  }
  
  handleMoodToggle3 = event => {
    this.setState({
      [event.target.name]: !this.state[event.target.name]
    });
  }

  render() {
    return (
      <div>
        <button onClick={this.handleMoodToggle1("Happy")}>Toggle Happy</button>
        <button onClick={this.handleMoodToggle1("Sad")}>Toggle Sad</button>
        <br />
        <button onClick={this.handleMoodToggle2}>Happy</button>
        <button onClick={this.handleMoodToggle2}>Sad</button>    
        <br />
        <button name="Happy" onClick={this.handleMoodToggle3}>Happy 3</button>
        <button name="Sad" onClick={this.handleMoodToggle3}>Sad 3</button> 
        <pre>{JSON.stringify(this.state, null, 2)}</pre>
      </div>
    );
  }
}

render(<App />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>

【讨论】：

我想要一个 setstate 的通用处理程序是什么？需要一个参数？
@William 那是一个通用的处理程序...您还希望处理程序如何知道“快乐”或“悲伤”之间的区别？仅仅因为有一个参数并不意味着它不是“通用的”...这使您可以轻松地为多种目的重用同一个处理程序...
@William 我刚刚添加了另外 2 个示例，说明如何“通用”处理并且没有参数......无论您如何处理，处理程序方法都必须知道您希望使用哪个属性以状态为目标....
@William 你添加到你的问题setStateHandler 的例子是字面意思，正是我的第一个例子演示的......你的setStateHandler 例子有一个参数......什么是你感到困惑吗？

【解决方案2】：

你可以为你检查我的例子：

export default class App extends Component {
  state = {
    emotions: [
      { name: 'happy', status: true },
      { name: 'sad', status: false },
      { name: 'angry', status: true },
    ]
  }
  handleEmotionToggle = (index) => {
    let emotions = [...this.state.emotions]
    emotions[index].status = !emotions[index].status
    this.setState({
      emotions
    })
  }
  render() {
    return (
      <View style={styles.container}>
        {
          this.state.emotions.map((emotion, index) => {
            return (
              <TouchableOpacity key={index}
                onPress={()=>this.handleEmotionToggle(index)}
              >
                <Text style={{margin:10,fontSize:20}}>{emotion.name} - {emotion.status ? "YES":"NO"} </Text>
              </TouchableOpacity>
            )
          })
        }
      </View>

    );
  }
}

【讨论】：