0

我有 1-8 行（带有自己的按钮），我想在用户使用时正确禁用每个按钮。现在，它只是在单击任何按钮时禁用最后一个按钮。知道我做错了什么吗？当它是 for 循环时，如何正确禁用按钮？

class ResolveSourceContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {
        modalOpen: false,
        updated: [],
        key: 0,
    };
}

disableRow = (key) => {
    let {updated} = this.state
    updated.push(key)
    this.setState({updated})
}

render() {

    const { size, modalOpen} = this.state;
    let {key} = this.state
    const { element} = this.props;

    return (
        <div>
            <Modal size={size} open={modalOpen} onClose={this.closeModal}>
                <Modal.Content style={{textAlign: 'center'}}>
                    <div className='ird-modal'>
                        <Modal.Header>
                            {`${element.lid}`}
                        </Modal.Header>
                    </div>
                    <Table>
            <Table.Header>
                <Table.Row>
                    <Table.HeaderCell>Type</Table.HeaderCell>
                    <Table.HeaderCell>Update</Table.HeaderCell>
                        </Table.Row>
                        {Object.keys(element.auditdiff).map(function(dataType){
                            if (dataType !== "Lid" && dataType !== "Datacenter" && dataType !=="Id") 
                            return (
                                Object.keys(element.auditdiff[dataType]).map(function(data){
                                    {key++}
                                    return (
                                        <Table.Row key = {i}>
                                            <Table.Cell>{data + " " + dataType}</Table.Cell>
                                            <Table.Cell>
                                            <Button content='Update Row' color='green' disabled = {updated.indexOf(key) >-1} //not correctly disabling the button
                                                onClick = {() =>  {this.disableRow(key)} } 
                                                />
                                            </Table.Cell>
                                        </Table.Row>
                                        );
                                    })
                            )})
                        }

                        </Table.Header>
                </Table>
                </Modal.Content>
            </Modal>
        </div>
    )
}
}
4

2 回答 2

0

首先，你需要使用 concat 来设置状态，而不是 push。concat 将返回一个新数组，但 push 只是将新项目添加到原始数组中

其次，您通过 {key++} 直接修改键状态。您实际上不需要键状态，您可以在 map 函数中使用索引。

class ResolveSourceContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {
        modalOpen: false,
        updated: [],
        key: 0,
    };
}

disableRow = (key) => {
    let {updated} = this.state
    this.setState({updated: updated.concat([key])})
}

render() {

    const { size, modalOpen} = this.state;
    let {key} = this.state
    const { element} = this.props;

    return (
        <div>
            <Modal size={size} open={modalOpen} onClose={this.closeModal}>
                <Modal.Content style={{textAlign: 'center'}}>
                    <div className='ird-modal'>
                        <Modal.Header>
                            {`${element.lid}`}
                        </Modal.Header>
                    </div>
                    <Table>
            <Table.Header>
                <Table.Row>
                    <Table.HeaderCell>Type</Table.HeaderCell>
                    <Table.HeaderCell>Update</Table.HeaderCell>
                        </Table.Row>
                        {Object.keys(element.auditdiff).map(function(dataType){
                            if (dataType !== "Lid" && dataType !== "Datacenter" && dataType !=="Id") 
                            return (
                                Object.keys(element.auditdiff[dataType]).map(function(data, index){
                                    return (
                                        <Table.Row key = {index}>
                                            <Table.Cell>{data + " " + dataType}</Table.Cell>
                                            <Table.Cell>
                                            <Button content='Update Row' color='green' disabled = {updated.indexOf(index) >-1} //not correctly disabling the button
                                                onClick = {() =>  {this.disableRow(index)} } 
                                                />
                                            </Table.Cell>
                                        </Table.Row>
                                        );
                                    })
                            )})
                        }

                        </Table.Header>
                </Table>
                </Modal.Content>
            </Modal>
        </div>
    )
}
}

于 2020-04-15T04:26:32.310 回答
-1

问题 #1：你正在改变状态对象！

问题：将新值推入现有数组并存储回状态

disableRow = (key) => {
  let {updated} = this.state
  updated.push(key) // <--- mutating current array reference
  this.setState({updated})
}

解决方案：将前一个数组和新值复制到一个新数组中

disableRow = (key) => {
  this.setState(prevState => ({
    updated: [...prevState.updated, key],
  }));
}

问题 #2：您没有使用一致的键来识别行，它们会更新每个渲染周期。

解决方案：为数据集中唯一的每个数据元素使用键，例如 id、名称等。相同元素的键应通过重新渲染保持不变。

于 2020-04-15T04:28:36.150 回答