Question

我尝试根据复选框选择渲染组件。我的方法如下：

var oldItem = $scope.findById(item.id, $scope.page.items);
oldItem = newItem;

$scope.findById = function(id, items) {
  var match = null;
  angular.forEach(items, function(i){
    if (match == null) {
      if (i.id == id) {
        match = i;
      } else if (i.items) {
         match = $scope.findById(id, i.items)
      }
    }
  })
  return match;
}

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

未捕获的TypeError：无法读取属性＆＃39;已检查＆＃39;未定义的

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

Answer 1

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

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

也尽量避免使用这么多参考。尽可能在反应组分中使用状态。

Answer 2

Suggestion As per DOC:

如果您之前使用过React，那么您可能熟悉旧版本其中ref属性是字符串的API，如“textInput”和DOM 节点作为this.refs.textInput访问。我们建议反对它，因为字符串引用有一些问题，被认为是遗留的，很可能在将来的一个版本中删除。如果您目前正在使用 this.refs.textInput访问refs，我们建议使用回调模式代替。

<强>的变化：

1。点击按钮返回组件将不会执行任何操作，因为您需要为onClick定义单独的功能。

2。您需要使用一些state变量，否则组件将不会自动重新渲染，只需点击按钮即可更新state值。

检查此代码段：

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'/>

获取Reactjs中复选框的值

4 个答案: