Question

我的切换开关如下所示：

class MyComponent extends Component
   {ton of code} 

<Toggle
   label={Click to enable Legacy deal}
   defaultToggled={false}
   labelPosition="right"
   {... styles stuff...}
   onToggle={handleLegacyToggle}
/>

如何在页面加载时将defaultToggled=false置于我的状态？即使用户没有与切换交互，我也需要状态包含false。

我的解决方法是在handleLegacyToggle中调用componentWillMount，在我的reducer中有一个if语句：

    case SET_LEGACY_FLAG:
      if(action.value) {
// if toggle has been toggled there will be a payload with action.value, so use the value send with the action else set to false
    return Object.assign({}, state, {'isLegacy': action.value});
    } else {
    return Object.assign({}, state, {'isLegacy': false});
    }

但这感觉就像一个黑客，我想知道是否有更好的方法。

Answer 1

我认为你做的事与他们应该完成的方式有点相反。

您的状态永远不应该从＆＃34; defaultToggled = {false}＆＃34;更新。但是，您的Toggle组件应该从父状态获得默认的false状态。

在您的父组件中添加：

this.state = { isToggled: false }

而不是你的组件：

<Toggle
   label={Click to enable Legacy deal}
   defaultToggled={this.state.isToggled}
   labelPosition="right"
   {... styles stuff...}
   onToggle={handleLegacyToggle}
/>

如果我没有完全理解你的需求，请解释我在哪里和我会尽力帮助。

读取Material-UI的默认值切换到State

1 个答案: