Question

尝试从生成的对象中获取e.target.data。 console.log显示他们props的{{1}}值已分配给他们。如何调用事件特定对象？我需要访问原始值并希望data删除它们。但到目前为止我尝试的一切，只返回_this2 TypeError（不是一个函数），或者我试图通过onClick处理程序传递的数据未通过。 onClick是一个简单的字符串数组，并从父组件传递。

this.props.plz_zwischen

Answer 1

当您需要访问地图中的另一个道具时，将其抽象为单独的组件始终是个好主意

＆＃13;

function ListItem(props) {
  return (
    <li>
      <label> {props.data} </label> 
      <input type="checkbox"  onClick={(e) => props.toggle(props.data)} />
    </li>
  );
}

class CheckBox extends React.Component {

    constructor(props){
        super(props);
        this.state = {
            checkboxState: false
        };
        this.toggle = this.toggle.bind(this);
    }
    toggle(a){
        console.log(a);
    }

    render(){

        let miniBox = this.props.plz_zwischen.map((a, index)=>{
            return <ListItem key={index} data={a} toggle={this.toggle} />;
        });

        return(
            <div>
                <ul id="rowlist">
                    {miniBox}
                </ul>
            </div>
        );
    }
}

ReactDOM.render(<CheckBox  plz_zwischen={['a','b','c']}/>, document.getElementById('app'));

＆＃13;

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

＆＃13;

这样你就可以访问子组件中的单个prop。

执行相同操作的另一种方法是将其作为自定义属性附加到DOM（因为它是一个字符串）。

<li data-item={a} key={index} data={a}> <label> {a} </label> <input type="checkbox"  onClick={(e) => this.toggle()} /></li>

然后点击：

event.target.getAttribute('data-item')

请注意，组件必须以大写字母开头

如何从ObjectArray中调用特定的对象

1 个答案: