複選框在不工作的反應JS

我的複選框沒有得到遏制，當動態創建。我無法找到問題。不過，當我硬編碼爲check box id和label for的值，它只是工作。複選框在不工作的反應JS

var category_list = this.props.categories_list.map(function(name, i) { 
     // debugger 
     return (
      <div className="group-chkbx list-group-item"> 
       <input key={i+11} type="checkbox" id={name.category_id} name="category" /> 
       <label htmlFor={name.category_id}>{name.name}</label> 
      </div> 
     ) 
    });

來源

2017-02-14 Abhishek Dhanraj Shahdeo

你的意思是，當你點擊複選框，它不顯示覆選標記？或者你無法獲得該值（選中/取消選中）？ – Hosar

是的，它不把複選標記上的複選框 –

有沒有什麼會設置checked道具在他們身上，反正。他們什麼時候應該被檢查？

（另外，記住，在陣列元件（如什麼.map退貨）should have unique key props。）

來源

2017-02-14 13:54:28 AKX

我已經添加了獨特的鍵複選框太多，但還是同樣的問題。 –

輸入將控制它是否被選中的檢查屬性。通常我使用本地狀態（或者來自全局狀態來控制所檢查的內容）。小例子：

class Something extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      checked: 0 
     } 

     this.handleChange = this.handleChange.bind(this); 
    } 

    handleChange(e) { 
     // Do Stuff 
    } 

    render() { 
     return (
      <div> 
       { 
        this.props.categories_list.map(function(name, i) { 
         return (
          <div className="group-chkbx list-group-item" key={i}> 
           <input checked={i === this.state.checked} onChange={this.handleChange} type="checkbox" id={name.category_id} name="category" /> 
           <label htmlFor={name.category_id}>{name.name}</label> 
          </div> 
         ) 
        }); 
       } 
      </div> 
     ); 
    } 
}

來源

2017-02-14 14:03:31 kjonsson

如果複選框沒有得到檢查，最有可能的是，一些其他的功能是防止它。
這裏和榜樣如何獲得的複選框值：

class WithChecks extends Component { 
    constructor(props){ 
     super(props); 
     this.getValue = this.getValue.bind(this); 
    } 
    getValue(e){ 
     const chk = e.target; 
     console.log(chk.checked); 
     console.log(chk.value); 
    } 

    render() { 
     const arr = ['a', 'b', 'c', 'd']; 
     return (
      <div> 
       { 
        arr.map((value, index) => { 
         return (
          <div key={index}> 
           <input type="checkbox" 
             id={'chk' + index} 
             onChange={this.getValue} 
             name="category" 
             value={value} /> 
           <label htmlFor={'chk' + index}>{value}</label> 
          </div> 
         ); 
        }) 
       } 
      </div> 
     ); 
    } 
}

也許這能幫助澄清。

來源

2017-02-14 14:48:21 Hosar

了很多我的同事的研究之一後幫了我一個解決方案。該htmlFor和id必須是相同的，but cannot be only numeric。我使用的Ids是純數字的。當我添加字母作爲前綴時，它就像魅力一樣開始工作。感謝所有人在這裏表現出興趣和幫助。

來源

2017-02-15 13:21:17

複選框在不工作的反應JS

回答

相關問題