在React中使用ref獲取複選框的值

有沒有什麼方法可以使用React中的ref來獲取複選框的值。正常的方式返回總是值「開」給我。在React中使用ref獲取複選框的值

var MyForm = React.createClass({ 
    save: function(){ 
     console.log(this.refs.check_me.value); 
    }, 

    render: function(){ 
     return <div><h1>MyForm</h1> 
      <div className="checkbox"> 
       <label> 
        <input type="checkbox" ref="check_me" /> Check me out 
       </label> 
      </div> 
      <button className="btn btn-default" onClick={this.save}>Submit</button> 
     </div> 
    } 
});

來源

2016-04-25 John

對於複選框，使用「檢查」，而不是「價值」：

var MyForm = React.createClass({ 
    save: function() { 
    console.log(this.refs.check_me.checked); 
    }, 

    render: function() { 
    return <div><h1>MyForm</h1> 
     <div className="checkbox"> 
     <label> 
      <input type="checkbox" ref="check_me" /> Check me out 
     </label> 
     </div> 
     <button className="btn btn-default" onClick={this.save}>Submit</button> 
    </div> 
    } 
});

結果：

來源

2016-04-25 07:12:04

回覆總是未定義:-( – John

這很奇怪，它適用於我。我在我的帖子中添加了一張圖片，如果它可以幫助 –

我很抱歉@Damien Leroux我複製了源代碼時犯了一個錯誤。您的代碼是有效的。非常感謝。我的工作！ – John

您可以複選框通過聽onChange，給它一個state值的管理元素。請嘗試以下操作：

var MyForm = React.createClass({ 
    save: function(){ 
    console.log(this.refs.check_me.value); 
    }, 

    toggleCheckboxValue:() => { 
    this.setState({checkBoxValue: !this.state.checkboxValue}); 
    }, 

    render: function(){ 
    return <div><h1>MyForm</h1> 
     <div className="checkbox"> 
      <label> 
       <input type="checkbox" ref="check_me" value={this.state.checkboxValue} onChange={this.toggleCheckboxValue} /> Check me out 
      </label> 
     </div> 
     <button className="btn btn-default" onClick={this.save}>Submit</button> 
    </div> 
    } 
});

每當複選框，點擊它會運行toggleCheckboxValue功能，將切換的this.state.checkboxValue值。

只是不要忘記在代碼中初始化this.state.checkboxValue函數。

注：作爲ivarni指出的那樣，你可能要特別控制checked值複選框，而不是value。雖然這兩種解決方案都可行

來源

2016-04-25 07:01:48 Chris

不知道爲什麼這是downvoted。這是一個控制輸入元素的完美有效的功能實現。 – Chris

我不知道。答案很好。 – Florent

因爲答案確實提供了一個解決方案，所以我不會失望，但我個人認爲它濫用了應該使用「價值」的東西。如果你看[mdn]（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox），你會看到它說* value屬性用於定義由複選框提交的值。 checked屬性用於指示是否選擇此項*。我還沒有測試過它會如何影響屏幕閱讀器，但如果這會讓一些可憐的盲人困惑，我不會感到驚訝。 – ivarni

沒有趕上事件和相應的值採用了經典的方式幫助：

event.target.checked, event.target.name

你可以看到一個例子：

class MyForm extends React.Component { 
    onChangeFavorite(event){ 
     console.log(event.target.checked, event.target.name); 
    }; 
    render(){ 
     return (<div><h1>MyForm</h1> 
      <div className="checkbox"> 
       <label> 
        <input type="checkbox" name="myCheckBox1" onChange={this.onChangeFavorite} defaultChecked={false} /> Check me out 
       </label> 
      </div> 
      <button className="btn btn-default" onClick={this.save}>Submit</button> 
     </div>) 
    }; 
};

來源

2017-08-13 09:33:06 IgorBeaz

在React中使用ref獲取複選框的值

回答

相關問題