陣營複選框不發送的onChange

TLDR：使用defaultChecked而不是檢查，這裏http://jsbin.com/mecimayawe/1/edit?js,output 陣營複選框不發送的onChange

工作jsbin試圖安裝一個簡單的複選框，當它被選中，將劃掉其標籤文本。出於某種原因，當我使用組件時，handleChange不會被觸發。任何人都可以解釋我做錯了什麼？

var CrossoutCheckbox = React.createClass({ 
    getInitialState: function() { 
    return { 
     complete: (!!this.props.complete) || false 
     }; 
    }, 
    handleChange: function(){ 
    console.log('handleChange', this.refs.complete.checked); // Never gets logged 
    this.setState({ 
     complete: this.refs.complete.checked 
    }); 
    }, 
    render: function(){ 
    var labelStyle={ 
     'text-decoration': this.state.complete?'line-through':'' 
    }; 
    return (
     <span> 
     <label style={labelStyle}> 
      <input 
      type="checkbox" 
      checked={this.state.complete} 
      ref="complete" 
      onChange={this.handleChange} 
      /> 
      {this.props.text} 
     </label> 
     </span> 
    ); 
    } 
});

用法：

React.renderComponent(CrossoutCheckbox({text: "Text Text", complete: false}), mountNode);

解決方案：

使用檢查不讓潛在價值變動（明顯），因此不會調用onChange處理。切換到defaultChecked似乎解決這個問題：

var CrossoutCheckbox = React.createClass({ 
    getInitialState: function() { 
    return { 
     complete: (!!this.props.complete) || false 
     }; 
    }, 
    handleChange: function(){ 
    this.setState({ 
     complete: !this.state.complete 
    }); 
    }, 
    render: function(){ 
    var labelStyle={ 
     'text-decoration': this.state.complete?'line-through':'' 
    }; 
    return (
     <span> 
     <label style={labelStyle}> 
      <input 
      type="checkbox" 
      defaultChecked={this.state.complete} 
      ref="complete" 
      onChange={this.handleChange} 
      /> 
      {this.props.text} 
     </label> 
     </span> 
    ); 
    } 
});

來源

2014-10-28 jdarling

首先，爲什麼不添加一個onChange只是 'this.setState（{checked：！this.state.checked}）' 比存儲一個值容易得多。然後在檢查的attrubute中有一個三元運算符：'checked = {this.state.checked？ 'checked'：null}' – zackify 2014-10-28 18:34:23

這就是它的開始，但它似乎沒有更新。所以我開始在這裏和那裏調試，以調試沒有被解僱的東西。理想情況下，完成後會回到最簡單的形式:) – jdarling 2014-10-28 18:37:15

假設你的mountNode是一個實際的dom節點，你將不得不使用'this.refs.complete.getDOMNode（）。checked'。看到小提琴http://jsfiddle.net/d10xyqu1/ – trekforever 2014-10-28 18:42:44

爲了讓您的複選框的選中狀態的路徑將是：

this.refs.complete.state.checked

另一種方法是，從傳遞到handleChange方法事件得到它：

event.target.checked

來源

2014-10-28 18:36:22 zbyte

handleChange永遠不會被調用，不要緊，如果你點擊複選框或標籤，handleChange不會被調用:(。 – jdarling 2014-10-28 18:38:14

嘗試使用defaultChecked = {this。 state.complete}而不是「checked」在你的輸入上 – zbyte 2014-10-28 18:40:11

就是這樣......搜索永遠在尋找和徘徊，如果其他人也碰到這個問題，將更新問題並提供完整的工作答案 – jdarling 2014-10-28 18:45:18

在材料UI，複選框的狀態可被取出作爲

this.refs.complete.state.switched

來源

2016-09-28 06:18:29

在這種情況下，您不希望在輸入DOM上使用onChange處理程序，您可以使用onClick屬性作爲替代方法。 defaultChecked，條件可能爲v16 IINM留下固定狀態。

class CrossOutCheckbox extends Component { 
     constructor(init){ 
      super(init); 
      this.handleChange = this.handleChange.bind(this); 
     } 
     handleChange({target}){ 
      if (target.checked){ 
      target.removeAttribute('checked'); 
      target.parentNode.style.textDecoration = ""; 
      } else { 
      target.setAttribute('checked', true); 
      target.parentNode.style.textDecoration = "line-through"; 
      } 
     } 
     render(){ 
     return (
      <span> 
       <label style={{textDecoration: this.props.complete?"line-through":""}}> 
       <input type="checkbox" 
         onClick={this.handleChange} 
         defaultChecked={this.props.complete} 
        /> 
       </label> 
       {this.props.text} 
      </span> 
     ) 
    } 
}

我希望這可以幫助未來的人。

來源

2018-02-09 06:39:55 akiespenc

陣營複選框不發送的onChange

回答

相關問題