反應受控制的複選框（切換）在道具上。

我需要做一個複選框（切換，如IOS）的組件，不使用狀態和控制只有道具。當前的代碼看起來是這樣的：反應受控制的複選框（切換）在道具上。

export class Checkbox extends React.Component { 

handleChange(event) { 
    this.props.onChange({value: event.target.value}); 
} 

render() { 
    return (
     <span> 
      <input class="ios_toggle" type="checkbox" 
       value={this.props.value} 
       disabled={this.props.disabled} 
       onChange={this.handleChange} 
      /> 
     </span> 
    ); 
} 
}

我用這樣的：

<Checkbox value={true} disabled={false} />

它幾乎工作，但：

它看起來不加以控制，即使道具等於value={true}
通過單擊此切換它會更改，但它不應該。我的意思是，如果我把道具value={true}，理論上它會是一樣的，無論我在瀏覽器中做什麼？

我錯過了什麼？

來源

2017-08-10 Samat

使用e.target.checked，不e.target.value。 console.log是一個非常有用的函數，用於調試目的，以便輸出返回值的變量，這些變量是您不期望的。 – fungusanthrax

如果複選框由道具控制，則必須更新道具並重新渲染頁面以使其顯示新值。

如何顯示該組件，由父頁面調用，如果這樣你就可以發佈父代碼...

而且，在你的handlechange功能，你可以做console.log(this.props)，看看有什麼價值你的複選框道具出來了，例如它是否被切換？如果是，你可以打電話給componentWillReceiveProps(newProps)並引發重新呈現從那裏使用this.setState({})但我懷疑的道具價值實際上沒有被更新

來源

2017-08-10 15:26:04 Alex

您需要使用checked屬性而不是value。嘗試這樣的事情，而不是：

export class Checkbox extends React.Component { 

    handleChange =() => { 
    this.props.onChange({ checked: !this.props.checked }); 
    } 

    render() { 
     return (
      <span> 
       <input class="ios_toggle" type="checkbox" 
        value={this.props.value} 
        disabled={this.props.disabled} 
        checked={this.props.checked} 
        onChange={this.handleChange} 
       /> 
      </span> 
     ); 
    } 
}

value屬性可以是任何東西，但它實際上是驅動切換的屬性被稱爲checked

來源

2017-08-10 15:29:14 Crysfel

反應受控制的複選框（切換）在道具上。

回答

相關問題