javascript - React - 禁用按钮单击行

Question

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

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

当用户点击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}下来作为 Prop 。

结果属性基本上只是获取的表数据。 '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();
    }
}

传递给 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
            }

然后在路由表中:

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

Answer 1

一种方法是:

1. 在使用 RouteTable 的组件上，创建一个名为 generatingId 的新状态.
2. 为 <RouteTable> 制作一个新 Prop 叫generatingId并制作this.state.generatingId作为它的值。
3. 在您的generateJourney上函数，执行 this.setState({generatingId: customerId})在 AJAX 调用之前。然后在 .then 和 .catch 中，创建 this.setState({generatingId: null})
4. 现在在您的 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 函数会将客户的 ID 设置为正在生成的 ID。这个新值将传递到您的 RouteTable，然后呈现您的表，并且由于行的按钮将检查 generatingId 是否prop 等于 customerId该行是 for，如果语句为 true，它将禁用该行上的按钮。