試圖建立一個可控轉換開關按鈕

Question

我拿起上網本的代碼（這是在高高的谷歌搜索結果）： https://codepen.io/BuiltByEdgar/pen/jWOVYQ

，但我已經長大惱火它的代碼。

我試圖讓這些按鈕的二重奏默認狀態打開，並且都不允許關閉。我選擇了該UI的行爲是簡單地重新啓用另一個，如果它的兄弟姐妹被關閉：

onONEClick() { 
    let { 
     TWO, 
     ONE, 
    } = this.state; 

    if (TWO) { 
     ONE = !ONE; 
    } else if (ONE) { 
     TWO = !TWO; 
     ONE = !TWO; 
    } else { 
     ONE = !ONE; 
    } 

    this.setState({ 
     ONE, 
     TWO, 
    }); 
    this.props.callBack({ 
     ONE, 
     TWO, 
    }); 
} 
onTWOClick() { 
    let { 
     TWO, 
     ONE, 
    } = this.state; 

    if (ONE) { 
     TWO = !TWO; 
    } else if (TWO) { 
     TWO = !TWO; 
     ONE = !ONE; 
    } else { 
     TWO = !TWO; 
    } 

    this.setState({ 
     ONE, 
     TWO, 
    }); 
    this.props.callBack({ 
     ONE, 
     TWO, 
    }); 
} 

和渲染：

 <div> 
     <div className="switch-container"> 
      <label> 
       <input 
        onChange={this.onONEClick} 
        type="checkbox" 
        className="switch" 
        value={this.state.ONE} 
        checked={this.state.ONE} 
       /> 
       <div> 
        <span><g className="icon icon-toolbar grid-view" /></span> 
        <span><g className="icon icon-toolbar ticket-view" /></span> 
        <div /> 
       </div> 
      </label> 
     </div> 
     ONE 
    </div> 
    <div> 
     <div className="switch-container"> 
      <label> 
       <input 
        onChange={this.onTWOClick} 
        type="checkbox" 
        className="switch" 
        value={this.state.TWO} 
        checked={this.state.TWO} 
       /> 
       <div> 
        <span><g className="icon icon-toolbar grid-view" /></span> 
        <span><g className="icon icon-toolbar ticket-view" /></span> 
        <div /> 
       </div> 
      </label> 
     </div> 
     TWO 
    </div> 

夠簡單吧？

問題是反應憎恨我的切換器的類型是「複選框」輸入：

，正如你可以看到我已經盡最大努力避免這種情況的發生，但我認爲這根本不是在卡片有一個輸入類型，並改變它的檢查狀態，而不是由人類。

所以我想也許我可以解決這個問題，只需用div重新設置複選框即可。 （標籤標籤還違反ESLint的）

回答JLAITIO：

和這裏就是我加入（該文件的道具聲明和構造頂部）：

const propTypes = { 
    value: React.PropTypes.object, 
    type: React.PropTypes.string, 
    callBack: React.PropTypes.func, 
    ONE: React.PropTypes.bool, 
    TWO: React.PropTypes.bool, 
}; 

const defaultProps = { 
    callBack:() => {}, 
    onChange:() => { 
    }, 
    value: { type: '' }, 
    ONE: true, 
    TWO: true, 
}; 



class ProviderInfosComponent extends Component { 
    constructor(props) { 
     super(props); 
     const initialValue = props.value; 
     this.state = { 
      ...initialValue, 
      ONE: this.props.ONE, 
      TWO: this.props.TWO, 
     }; 
     this.onONEClick = this.onONEClick.bind(this); 
     this.onTWOClick = this.onTWOClick.bind(this); 
    } 

Answer 1

你得到這個錯誤，如果在任何點你的value屬性沒有設置，或設置爲undefined的值，然後它是一個現有的React狀態值。

我最好的猜測是你的構造函數不會初始化ONE和TWO，因此值是undefined開始。然後當你真正有一個值時，組件從一個不受控制的組件狀態（=「獨立於React的組件狀態」）轉變爲受控的（=「組件狀態直接與React狀態相關聯）」。

Answer 2

作爲除了@ jlaitio的回答，

您不必設置一個複選框，輸入一個值。你可以使用組件的選中的道具。對於更改後的函數，也可以稍微改進，以便更容易地跟蹤值。

constructor(props) { 
    super(props); 
    this.state = { 
     ONE: true, 
     TWO: true 
    }; 
    } 
    onONEChange = (event) => { 
    this.setState((prevState) => { 
     ONE: event.target.checked, 
     TWO: (event.target.checked === false ? true : prevState.TWO) // change state of TWO if ONE is false else just leave it as is 
    },() => { 
     this.props.callBack({ ONE: this.state.ONE, TWO: this.state.TWO }); 
    }); 
    } 
    onTWOChange = (event) => { 
    this.setState((prevState) => { 
     ONE: (event.target.checked === false ? true : prevState.ONE), // change state of ONE if TWO is false else just leave it as is 
     TWO: event.target.checked 
    },() => { 
     this.props.callBack({ ONE: this.state.ONE, TWO: this.state.TWO }); 
    }); 
    }