map里的点击事件，会影响其他map出来的元素

Question

我在map里传了一个onQRScreening方法，点击切换打开/关闭，但是点击一个，所有map出来的元素都会受影响，这该怎么解决

class Stuonline extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            QRScreening: false,
        };
        this.onQRScreening = this.onQRScreening.bind(this);
    };

    onQRScreening(text) {
        this.setState(prevState => ({
            QRScreening: !prevState.QRScreening
        }))
        //控制打开/关闭
        if (this.state.QRScreening == true) {

            //一些其它的操作
        } else if (this.state.QRScreening == false) {

            //一些其它的操作
        }
    }

    render() {
        const barrageList = this.props.barrageList || [];
        const QRScreening = this.state.QRScreening;
        const onQRScreening = this.onQRScreening;
        return (
            <div>
                {barrageList.map(function (barrageList, index) {
                    const qqq = QRScreening ?
                        <div onClick={e => onQRScreening(barrageList.text)}>
                            <img src='' />
                            打开
                                            //现在的问题是我传了一个onQRScreening方法进来，点击切换打开/显示
                                            //但是所有map出来的都会一起被控制，怎么解决呢
                        </div>
                        :
                        <div onClick={onQRScreening}>
                            关闭
                        </div>
                    return (
                        <div key={index}>
                            <List>
                                <Item
                                    extra={qqq}
                                >
                                    {barrageList.text}
                                    <Brief>{barrageList.uid}{barrageList.name}</Brief>
                                </Item>
                            </List>
                        </div>
                    )
                })
                }
            </div>
        );
    }
}

Answer 1

因为你所有item的状态都是用QRScreening来判断的，解决方法：

在onQRScreening传入index，将点击的index存入QRScreening中，通过判断QRScreening中是否存在当前点击对象的index来改变开关的状态。

大致代码如下（我用的react版本是15.4.2）：

    state = { QRScreening: [] }
    onQRScreening = (index) => {
        let QRScreening = this.state.QRScreening
        // 判断是否点击过，点击过则删除，未点击过则添加
        QRScreening.indexOf(index) === -1 ? QRScreening.push(index) : QRScreening.splice(QRScreening.indexOf(index), 1)

        this.setState({
            QRScreening
        })
    }
    render() {
        return (
            <div>
                {[1, 2, 3].map((m, index) => {
                    let flag = this.state.QRScreening.indexOf(index) === -1
                    return (
                        <div key={index} onClick={() => this.onQRScreening(index)}>
                            {flag ? '关闭' : '开启'}
                        </div>
                    )
                })}
            </div>
        )
    }

Answer 2

我觉得你打开还是关闭是根据QRScreening来的把，而onQRScreening会改变这个state,导致所有的都变了