如何在React Native中为setState的Toggle创建通用处理程序

Question

I want to make a generic handler for setstate rather than having two different handlers? How can I do that?

I am thinking of something like:

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

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

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

My two touchable opacities:

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

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

Answer 1

EDIT: added demo StackSnippet...

EDIT 2: added 3 total ways to handle this "generically"

You could use a generic handler to accomplish this - just supply the "mood" as a parameter.

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>

---

DEMO:

 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> 

Answer 2

you can check my exmaple for you:

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>

    );
  }
}