在 Reactjs 中获取复选框的值

Question

我正在尝试根据复选框选择来呈现组件。我的做法如下：

class ReportMainCat extends Component {    
    constructor(props) {
        super(props);   
        this.report_next = this.report_next.bind(this);    
    };

    report_next() {    
        if(this.refs.sexual.checked) {
            return <PostOptionBar/>   
        }    
    }

    render() {            
        return (
            <div className="text_align_left">   
                <div className="width_100 margin_bottom10px">
                    <input type="checkbox"  ref="sexual"/>
                    <a>Sexual Content</a>
                </div>

                <div className="width_100 margin_bottom10px">
                    <input type="checkbox" ref="selfharm"/>
                    <a>Threat or self harm</a>
                </div>

                <div className="width_100 margin_bottom10px">
                    <input type="checkbox" ref="abuse"/>
                    <a>Abuse or bullying</a>
                </div>

                <div className="width_100 margin_bottom10px">
                    <input type="checkbox" ref="illegal"/>
                    <a>Illegal substances</a>
                </div>

                <div className="width_100 margin_bottom10px">
                    <input type="checkbox" ref="discrimination"/>
                    <a>Discrimination</a>
                </div>

                <div className="width_100 margin_bottom10px">
                    <input type="checkbox" ref="copyright"/>
                    <a>Copyright or spam</a>
                </div>

                <div className="width_100 margin_bottom10px">
                    <input type="checkbox" ref="nopermission"/>
                    <a>Humiliating, embarassing or posted without permission</a>
                </div>

                <button className="float_right" onClick={this.report_next}>Next</button>

                {this.report_next()}

            </div>        
        )    
    }
}

我正在检查复选框是否被选中并相应地渲染组件，但我不断收到此错误：

未捕获的类型错误：无法读取未定义的“已检查”属性

我该如何解决这个问题？或者这是做我想做的最好的方法吗？

Answer 1

建议不要在 react 组件中使用字符串引用。

https://facebook.github.io/react/docs/refs-and-the-dom.html

所以必须以这种方式使用refs

 ref={(input) => { this.textInput = input; }}

所以你的输入标签应该是这样的

<input type="checkbox" ref={(input) => { this.sexualInput = input; }} />

然后在report_next() 函数中，您可以通过使用获取该值。

this.sexualInput.checked

还要尽量避免使用这么多的引用。在 react 组件中尽量使用 state。

Answer 2

Suggestion As per DOC:

如果你以前使用过 React，你可能熟悉一个更老的 ref 属性为字符串的 API，如“textInput”，以及 DOM 节点作为 this.refs.textInput 访问。我们建议不要这样做，因为 字符串引用有一些问题，被认为是遗留的，并且很可能 在将来的版本之一中删除。如果您当前正在使用 this.refs.textInput 访问 refs，我们推荐回调模式 而是。

变化：

1.点击按钮返回组件不会做任何事情，因为你需要为onClick定义一个单独的函数。

2.您需要使用一些state 变量，否则组件将不会自动重新渲染，并且单击按钮时您需要更新该state 值。

检查这个sn-p：

class ReportMainCat extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
           renderComponent: false
        }
        this.buttonClick = this.buttonClick.bind(this);
    };

    report_next(){
        if(this.refs.sexual && this.refs.sexual.checked){
            return <div> hello </div>
        }
    }
    
    buttonClick(){
       this.setState({
          renderComponent: true
       })
    }

    render() {
        return (
            <div className="text_align_left">

                <div className="width_100 margin_bottom10px">
                    <input type="checkbox"  ref="sexual"/>
                    <a>Sexual Content</a>
                </div>

                <div className="width_100 margin_bottom10px">
                    <input type="checkbox" ref="selfharm"/>
                    <a>Threat or self harm</a>
                </div>

                <div className="width_100 margin_bottom10px">
                    <input type="checkbox" ref="abuse"/>
                    <a>Abuse or bullying</a>
                </div>

                <div className="width_100 margin_bottom10px">
                    <input type="checkbox" ref="illegal"/>
                    <a>Illegal substances</a>
                </div>

                <div className="width_100 margin_bottom10px">
                    <input type="checkbox" ref="discrimination"/>
                    <a>Discrimination</a>
                </div>

                <div className="width_100 margin_bottom10px">
                    <input type="checkbox" ref="copyright"/>
                    <a>Copyright or spam</a>
                </div>

                <div className="width_100 margin_bottom10px">
                    <input type="checkbox" ref="nopermission"/>
                    <a>Humiliating,embarassing or posted without permission</a>
                </div>

                <button className="float_right" onClick={this.buttonClick}>Next</button>

                {this.report_next()}
            </div>
        )
    }
}

ReactDOM.render(<ReportMainCat/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

Answer 3

使用 SyntheticEvent，'e'。下面是一个例子：

const element1 = "male";
const element2 = "female";

<input
 type="checkbox"
 name={element1}
 value={element1}
 onChange={this.handleChange}
/>
<label for="element" style={{ fontSize: 35 }}>
{element2}
 </label>

<input
 type="checkbox"
 name={element2}
 value={element2}
 onChange={this.handleChange}
/>
<label for="element" style={{ fontSize: 35 }}>
{element2}
 </label>




handleChange = (e) => {
// to find out if it's checked or not; returns true or false
const checked = e.target.checked;

// to get the checked value
const checkedValue = e.target.value;

// to get the checked name
const checkedName = e.target.name;

//then you can do with the value all you want to do with it.
};

Answer 4

class ReportMainCat extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
           renderComponent: false
        }
        this.buttonClick = this.buttonClick.bind(this);
    };

    report_next(){
        if(this.refs.sexual && this.refs.sexual.checked){
            return <div> hello </div>
        }
    }
    
    buttonClick(){
       this.setState({
          renderComponent: true
       })
    }

    render() {
        return (
            <div className="text_align_left">

                <div className="width_100 margin_bottom10px">
                    <input type="checkbox"  ref="sexual"/>
                    <a>Sexual Content</a>
                </div>

                <div className="width_100 margin_bottom10px">
                    <input type="checkbox" ref="selfharm"/>
                    <a>Threat or self harm</a>
                </div>

                <div className="width_100 margin_bottom10px">
                    <input type="checkbox" ref="abuse"/>
                    <a>Abuse or bullying</a>
                </div>

                <div className="width_100 margin_bottom10px">
                    <input type="checkbox" ref="illegal"/>
                    <a>Illegal substances</a>
                </div>

                <div className="width_100 margin_bottom10px">
                    <input type="checkbox" ref="discrimination"/>
                    <a>Discrimination</a>
                </div>

                <div className="width_100 margin_bottom10px">
                    <input type="checkbox" ref="copyright"/>
                    <a>Copyright or spam</a>
                </div>

                <div className="width_100 margin_bottom10px">
                    <input type="checkbox" ref="nopermission"/>
                    <a>Humiliating,embarassing or posted without permission</a>
                </div>

                <button className="float_right" onClick={this.buttonClick}>Next</button>

                {this.report_next()}
            </div>
        )
    }
}

ReactDOM.render(<ReportMainCat/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min`enter code here`.js"></script>

<div id='app'/>