reactjs - 在具有多项选择的 .map() 函数中为每个组件绑定 onClick

问题描述

我有多个使用 .map 函数的分区，在分区内我有多个按钮也使用 .map 函数。我能够获得按钮的选定 ID，但我需要在每个部门中选择特定按钮。我创建了一个调用子组件 ButtonTest 的父组件 CreateInspectDtl。

export class CreateInspectDtl extends Component {
    constructor(props) {
        super(props)
        this.state = {
            className: 'buttonTrue',
            selectedtest: null,
            categData: []
        }
        this.changeColor = this.changeColor.bind(this);
    }
    changeColor(itemSelected) {
        console.log(itemSelected)
        this.setState({
            selectedtest: itemSelected
        })
    }
    render() {
        var changeClass = this.state.className;
        var selected = this.state.selectedtest;
        var click = this.changeColor;
        var categData = this.state.categData.map(data => {
            return (
                <div>
                    <ButtonGroup>
                        <p style={{
                            fontWeight: 'bold', marginTop: '0.7vmin',
                            marginBottom: '0'
                        }}>{data.test_code}</p>
                        {data.test_line.map(test => {
                            var itemSelected = selected && selected.test_line_id ===
                                test.test_line_id;
                            return (
                                <div className="pic-div">
                                    <ButtonTest
                                        isSelected={itemSelected}
                                        className={changeClass}
                                        onClick={click}
                                        test={test}
                                    />
                                </div>
                            );
                        })
                        }
                    </ButtonGroup>
                    <div>
                        <FormGroup>
                            <Col sm={10}>
                                <Input type="textarea" name="text" id="exampleText" style=
                                    {{ marginTop: '0.7em', width: '33.5em', height: '5em', align: 'center' }} />
                            </Col>
                        </FormGroup>
                    </div><br />
                </div>
            )
        });
    }
}

class ButtonTest extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        var className = this.props.className;
        return (
            <Button onClick={() => this.props.onClick(this.props.test)} className=
                {this.props.isSelected ? 'buttonTrue' : 'buttonFalse'}>
            </Button>
        )
    }
}

标签： reactjs

reactjs - 在具有多项选择的 .map() 函数中为每个组件绑定 onClick

问题描述

解决方案

推荐阅读