Javascript 在react中使用复选框切换

在我的react应用程序中，我的初始状态如下：

state= {
  graphBackgroundColor: '#fff',
  graphLabelColor: '#000',
} 

我有一个调用此函数的复选框：

toggleCOlor = event => {
 console.log('toggling color');
  this.setState({
    graphBackgroundColor: '#000',
    graphLabelColor: '#fff',
    renderCalories: event.target.value === 10
  });
}

这在功能上是有效的，但无论是否选中了ckeckbox，颜色现在都将保持在该功能中设置的颜色。我如何使其切换，以便如果选中复选框，则graphBackgroundColor为000，如果未选中，则为fff

toggleCOlor = event => {
 console.log('toggling color');
  this.setState({
    graphBackgroundColor: this.state.graphBackgroundColor === '#000' ? '#fff' : '#000',
    graphLabelColor: this.state.graphLabelColor === '#fff' ? '#000' : '#fff',
    renderCalories: event.target.value === 10
  });
}

如果需要，可以编写一个函数，该函数传入当前颜色并返回切换的颜色，而不是一行三值运算符

returnAlternateColor = (color) => {
    if(color === "#fff") return '#000;
    if(color === '#000') return '#fff';
}

然后通过this.state.graphLabelColor而不是三元运算符调用此函数。这样你可以有更多的选择

如果需要，可以编写一个函数，该函数传入当前颜色并返回切换的颜色，而不是一行三值运算符

returnAlternateColor = (color) => {
    if(color === "#fff") return '#000;
    if(color === '#000') return '#fff';
}

然后通过this.state.graphLabelColor而不是三元运算符调用此函数。这样你可以有更多的选择。

你可以试试

     this.setState(prevState => ({
      graphBackgroundColor: prevState.graphBackgroundColor === '#000' ? '#fff' : '#000',
      graphLabelColor: prevState.graphLabelColor === '#fff' ? '#000' : '#fff',
       renderCalories: event.target.value === 10
    }));

你可以试试

     this.setState(prevState => ({
      graphBackgroundColor: prevState.graphBackgroundColor === '#000' ? '#fff' : '#000',
      graphLabelColor: prevState.graphLabelColor === '#fff' ? '#000' : '#fff',
       renderCalories: event.target.value === 10
    }));

---

创建一个函数onChange以检查或取消锁定

onChange=(e)=>{
 [e.target.name]:e.target.value
}

您可以创建一个函数，例如更改颜色：

myStyleWithConditional=()=>{
   background:event.target.value === 10? "#000":"#fff"
}

作为回报

<div style={this.myStyleWithConditional}></div>
<input type="checkbox" name="check" value=10>

---

创建一个函数onChange以检查或取消锁定

onChange=(e)=>{
 [e.target.name]:e.target.value
}

您可以创建一个函数，例如更改颜色：

myStyleWithConditional=()=>{
   background:event.target.value === 10? "#000":"#fff"
}

作为回报

<div style={this.myStyleWithConditional}></div>
<input type="checkbox" name="check" value=10>

---

您必须使用graphBackgroundColor：‘fff’初始化状态，您确切地说@Owner是什么意思？我将初始状态设置为模块加载时的状态。我认为您需要选中复选框状态。如果选中，则fff可能为1000，如果未选中，则为000checked@TomN.是否有任何值分配给该键？您必须使用graphBackgroundColor：‘fff’初始化状态，您确切地说@Owner是什么意思？我将初始状态设置为模块加载时的状态。我认为您需要选中复选框状态。如果选中，则fff可能为1000，如果未选中，则为000checked@TomN.是否有任何值分配给键？