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

Question

我想为 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>

Answer 1

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

编辑 2： 添加了 3 种处理方法 "generically"

您可以使用通用处理程序来完成此操作 - 只需提供 "mood" 作为参数即可。

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>

Answer 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>

    );
  }
}

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

How do I make a generic handler for Toggle for setState in React Native

reactjs

react-native

native