我到处搜索这个，但每个例子似乎都不符合我想要的。单击按钮后，对于特定的表行，我需要禁用当前行，或者更好地禁用该行上的按钮。
我之前编写的代码只是禁用每一行的按钮。这是不正确的。有关某些上下文，请参阅我正在编写的应用程序的屏幕截图:
当用户点击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>
最佳答案
一种方法是:
- 在使用
RouteTable的组件上，创建一个名为generatingId的新状态. - 为
<RouteTable>制作一个新 Prop 叫generatingId并制作this.state.generatingId作为它的值。 - 在您的
generateJourney上函数，执行this.setState({generatingId: customerId})在 AJAX 调用之前。然后在 .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 函数会将客户的 ID 设置为正在生成的 ID。这个新值将传递到您的 RouteTable，然后呈现您的表，并且由于行的按钮将检查 generatingId 是否prop 等于 customerId该行是 for，如果语句为 true，它将禁用该行上的按钮。
关于javascript - React - 禁用按钮单击行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59300692/