0

I want to access the boolean value of child's property "checked" in ReactJS. Now I have the following render method.

Class LoginCard.js

render() {
    return (
        <Card style={styles.card}>
            <UserIcon/>
            <UPSection ref="inputs" updateUName={this.updateInputState_Username} updatePWord={this.updateInputState_Password}/>
            <RememberMe ref="RemMeChk"/> //This conponent containing the checkbox.
            <LoginBtn onClick={this.handleLoginBtnClicked}/>
        </Card>
    );
}

I want to get the bool checked value in component RememberMe. The following shows you the render method of RememberMe.

Class RememberMe.js

render() {
    return (
        <div style={styles.div}>
            <Checkbox ref="rm" label="Remember Me" labelStyle={styles.text} />
        </div>
    );
}

The component Checkbox is from Material UI and it has the property of checked. I try to use var isRemMeChked = ReactDOM.findDOMNode(this.refs.RemMeChk.refs.rm).checked; inside the class LoginCard to access the bool value but it is undefined. What is the proper way to access the bool value?

Casper
  • 4,435
  • 10
  • 41
  • 72

1 Answers1

1

Fetch the value in RememberMe.js

RememberMe.js

getValue() {
   return this.refs.rm.checked;
}
render() {

    return (
        <div style={styles.div}>
            <Checkbox ref="rm" label="Remember Me" labelStyle={styles.text} />
        </div>
    );
}

Login Card getValue() { return this.refs.RemMeChk.getValue() } render() {

    return (
        <Card style={styles.card}>
            <UserIcon/>
            <UPSection ref="inputs" updateUName={this.updateInputState_Username} updatePWord={this.updateInputState_Password}/>
            <RememberMe ref="RemMeChk"/> //This conponent containing the checkbox.
            <LoginBtn onClick={this.handleLoginBtnClicked}/>
        </Card>
    );
}
Piyush.kapoor
  • 6,715
  • 1
  • 21
  • 21
  • Why you can declare a method inside render method? – Casper Jul 01 '16 at 16:53
  • I tested that the method return properly but `this.refs.rm.checked` is `undefined`. I also tested to return `ReactDOM.findDOMNode(this.refs.rm).checked` but it is also `undefined`. How to get the checked bool value in Checkbox? The documentation stated that there is a property `checked`. – Casper Jul 01 '16 at 17:13