javascript - 在 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>        
        )    
    }
}

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

Uncaught TypeError: Cannot read property 'checked' of undefined

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

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 组件中尽可能使用状态。