React - 单击按钮时禁用行答案

【问题标题】：React - Disable Row on Button ClickReact - 单击按钮时禁用行
【发布时间】：2019-12-12 08:47:17
【问题描述】：

我到处寻找这个，但每个例子似乎都不符合我想要的。单击按钮后，对于特定的表格行，我需要禁用该当前行，或者更好地禁用该行上的按钮。

我之前编写的代码只是禁用了每一行的按钮。这是不正确的。有关某些上下文，请参阅我正在编写的应用程序的屏幕截图：

当用户点击特定行的Generate Journey 时，我需要禁用该特定行的“生成旅程”按钮，以阻止他们再次执行此操作（这会导致服务器端出现问题）。

我猜对有 React 经验的人来说，这是一项简单的任务，但我尝试了不同的方法，但每一种都没有给我想要的结果。

这是我的代码：

上面截图的渲染函数如下：

 render() {
    return (
        <div className="polls-container">
            <div className="dashboard-title" style={{paddingTop: "2%", marginLeft: "-50px"}}>
                <h2>Dashboard</h2>
            </div>
            {
                !this.state.loading && this.state.results.length > 0 ? (
                    <RouteTable buttonDisabled ={this.state.emulateButtonDisabled} results={this.state.results} generateJourney={this.generateJourney} startEmulation={this.getJourneyEmulations}/>
                ) : null
            }
            {
                !this.state.isLoading && this.state.results.length === 0 ? (
                    <div className="no-polls-found">
                        <span>No Active Journey Generations</span>
                    </div>    
                ): null
            }
            {
                this.state.isLoading ? 
                <LoadingIndicator />: null                     
            }
        </div>
    );
}
}

这基本上调用了Route Table 组件，它呈现了屏幕截图中的表格。请注意我是如何将results={this.state.results} generateJourney={this.generateJourney} startEmulation={this.getJourneyEmulations} 作为道具传递下来的。

results 属性基本上就是获取的表数据。 'generateJourney'函数的代码如下（点击Generate Journey按钮时执行）：

 generateJourney = (customerId, startDate, endDate, linkedCustomers, lat, lng) => {
   let confirmGenerateJourney = window.confirm('Are you sure you want to start this Journey Generation?')
    if (confirmGenerateJourney) {
        fetch('http://10.10.52.149:8081/generate-journeys', {
            method: 'POST',
            mode:'cors',
            headers: {
                'Content-Type': 'application/json',
                'Access-Control-Allow-Origin': '*',
            },
            body: JSON.stringify( {
                customerId: customerId,
                startDate: startDate,
                endDate: endDate,
                serviceIds: linkedCustomers,
                homeLat: lat,
                homeLng: lng
            })
        }).then(response => response.json())
                .catch(err => console.log(err))

        notification.success({
            message: 'Kinesis Fake Telemetry',
            description: "Journey has Started being Generated",
        });

        fetch('http://localhost:8080/api/routeGen/updateCustomerStatus', {
            method: 'PUT',
            mode:'cors',
            headers: {
                'Content-Type': 'application/json',
                'Access-Control-Allow-Origin': '*',
            },
            body: JSON.stringify( {
                customerId: customerId,
                status: 1
            })
        }).then(response => response.json())
            .catch(err => console.log(err))

        window.location.reload();
    }
}

没什么特别的，只是简单地调用 API 来 POST 或 PUT 数据。在此之后，这里是 startEmulation={this.getJourneyEmulations} 的代码，当单击 Emulate 按钮时单击该代码。这基本上会在我们模拟它之前检查旅程是否已经生成。（等待完成状态）

我的 RouteTable 类如下：

 export class RouteTable extends Component {

constructor(props) {
    super(props);
}

getStatus(result) {
    let status;
    if (result.customerStatus === 0) {
        status = (<Badge color={'secondary'}> Pre Journey Generation</Badge>)
    } else if(result.customerStatus === 1) {
        status = (<Badge color={'success'}> In Journey Generation</Badge>)
    } else if (result.customerStatus === 2) {
        status = (<Badge color={'info'}> Ready for Emulation</Badge>)
    } else {
        status = (<Badge href="/journeyEmulation" color={'danger'}> In Emulation</Badge>)
    }
    return status;
}

render() {
    const {startEmulation, buttonDisabled} = this.props;
    const items = this.props.results.map(result => {
        const serviceIdList = [];
        const deviceRequests = [];

        result.linkedCustomers.map(x => { const emulationData = {"imei": x.imei, "serviceId": x.serviceId, "deviceType": "CALAMP"}
            deviceRequests.push(emulationData)
        });

         result.linkedCustomers.map(x => {serviceIdList.push(x.serviceId);});

        return (
            <tr key={result.linkedCustomerId}>
                <th scope="row">{result.customerName}</th>
                <td>{result.linkedCustomerId}</td>
                <td>{result.numDevices}</td>
                <td>{result.startDate}</td>
                <td>{result.endDate}</td>
                <td>{result.lat}</td>
                <td>{result.lng}</td>
                <td> {this.getStatus(result)}</td>

                <td>
                    <div style={{width:"100%"}}>
                        <Button style={{width: "50%"}} color="primary" onClick={() => this.props.generateJourney(result.linkedCustomerId, result.startDate, result.endDate, serviceIdList, result.lat, result.lng)} disabled={buttonDisabled}>Generate Journey</Button>
                        {' '}
                        <Button style={{width: "50%", marginTop: "4%"}} color="danger" onClick={() => startEmulation(result.linkedCustomerId, result.customerName, result.startDate, result.endDate, deviceRequests)}>Emulate Journey</Button>
                    </div>
                </td>
            </tr>
        )
    })

    return (
        <div className="tableDesign" style={{marginTop: "2%"}}>
        <Table hover>
            <thead>
            <tr>
                <th>Customer Name</th>
                <th>Kinesis Customer Id</th>
                <th>Number of Devices</th>
                <th>Start Date</th>
                <th>End Date</th>
                <th>Home Lat</th>
                <th>Home Long</th>
                <th>Status</th>
                <th>Actions</th>
            </tr>
            </thead>
            <tbody>
            {items}
            </tbody>
        </Table>
        </div>
    )
}

现在我的问题是如何禁止用户生成两次旅程？我已经尝试过发布的解决方案，它只是禁用每一行的所有按钮。任何帮助将不胜感激，因为这变得令人沮丧！我猜我可以以某种方式使用表格的行键 <tr key {result.linkedCustomerId}> 指向要禁用的特定按钮？

感谢您的帮助:)

***** 编辑 *****

 generateJourney = (customerId, startDate, endDate, linkedCustomers, lat, lng) => {
   let confirmGenerateJourney = window.confirm('Are you sure you want to start this Journey Generation?')
    if (confirmGenerateJourney) {

        this.setState({generatingId: customerId});

        fetch('http://10.10.52.149:8080/generate-journeys', {
            method: 'POST',
            mode:'cors',
            headers: {
                'Content-Type': 'application/json',
                'Access-Control-Allow-Origin': '*',
            },
            body: JSON.stringify( {
                customerId: customerId,
                startDate: startDate,
                endDate: endDate,
                serviceIds: linkedCustomers,
                homeLat: lat,
                homeLng: lng
            })
        }).then(response => {
            this.setState({generatingId: null});
            // response.json();
        }).catch(err => {
            this.setState({generatingId: null});
            console.log(err)
        })

        notification.success({
            message: 'Kinesis Fake Telemetry',
            description: "Journey has Started being Generated",
        });

        fetch('http://localhost:8080/api/routeGen/updateCustomerStatus', {
            method: 'PUT',
            mode:'cors',
            headers: {
                'Content-Type': 'application/json',
                'Access-Control-Allow-Origin': '*',
            },
            body: JSON.stringify( {
                customerId: customerId,
                status: 1
            })
        }).then(response => response.json())
            .catch(err => console.log(err))

        // window.location.reload();
    }
}

props 传递给 RouteTable

 {
                !this.state.loading && this.state.results.length > 0 ? (
                    <RouteTable generatingId ={this.state.generatingId} results={this.state.results} generateJourney={this.generateJourney} startEmulation={this.getJourneyEmulations}/>
                ) : null
            }

然后在RouteTable中：

                            <Button style={{width: "50%"}} color="primary" onClick={() => this.props.generateJourney(result.linkedCustomerId, result.startDate, result.endDate, serviceIdList, result.lat, result.lng)} disabled={this.props.generatingId === result.linkedCustomerId}>Generate Journey</Button>

【问题讨论】：

如果您将buttonDisabled 属性设置为true，它会禁用按钮吗？只是想确保您尝试禁用的按钮组件没有问题。
是的，但是对于表格中的每个按钮，而不是特定的行！

标签： javascript reactjs disable

【解决方案1】：

一种方法是：

在使用 RouteTable 的组件上，创建一个名为 generatingId 的新状态。
为<RouteTable> 创建一个名为generatingId 的新道具，并将this.state.generatingId 作为其值。
在您的generateJourney 函数中，在AJAX 调用之前执行this.setState({generatingId: customerId})。然后在 .then 和 .catch 中，创建一个this.setState({generatingId: null})
现在在您的 RouteTable 组件中，将您的 Row 的生成旅程按钮更新为如下所示：

<Button style={{width: "50%"}} color="primary" onClick={() => this.props.generateJourney(result.linkedCustomerId, result.startDate, result.endDate, serviceIdList, result.lat, result.lng)} disabled={this.props.generatingId === result.linkedCustomerId}>Generate Journey</Button>

当您单击 GenerateJourney 按钮时会发生什么情况，generateJourney 函数会将客户的 ID 设置为正在生成的 ID。这个新值将被传递给您的 RouteTable，然后将呈现您的表格，并且由于行的按钮将检查 generatingId 属性是否等于该行的 customerId，它将禁用该按钮如果语句为真，则行。

【讨论】：

嗨，我已经编辑了我的答案。它似乎不起作用。它会禁用，然后很快又恢复为可按下状态
好的，这样就可以了。但是，如果我转到新页面然后返回表格页面，则该按钮可以再次单击。我怎样才能解决这个问题？我需要传递状态吗？