Question

我有一个包含不同行的表（反应组件）。这些行名为service_users。当我单击行的保存按钮时，将调用registerServiceUser方法，该方法使用splice函数更新父组件中的状态。但是在状态改变之后，保存行的输入值将传递给下一个组件（参见屏幕截图）。

保存的行在这里是名为Milan den Vliet的行，在保存（涉及状态更改）之后，将值23:00和1,00传递给Finn de Dekker的行。

如何防止此行为？

服务用户子组件代码：

return (
  <tr>
    <td style={tdStyle}>{driverIcon}</td>
    <td style={tdStyle}>{this.props.name}</td>
    <td style={tdStyle}>{moment(this.props.startTime).zone('00:00').format('HH:mm')}</td>
    <td><input type="text" onChange={this.handleEndTimeChange} className="form-control" /></td>
    <td><input type="number" onChange={this.handlePauseChange} className="form-control" defaultValue={this.state.pause_time} /></td>
    <td><input type="number" step="any" onChange={this.handleWorkHoursChange} className="form-control" value={this.state.work_hours} /></td>
    <td><input type="number" step="any" onChange={this.handleExtraHoursChange} className="form-control" placeholder="Extra uren"  style={extraHoursBackground} /></td>
    <td style={tdStyle}>{driverField}</td>
    <td style={tdStyle}><a href="#" onClick={this.registerTimesheet} className="btn btn-primary">Opslaan</a></td>
  </tr>
);

保存后，我用以下内容更新状态：

this.setState({ service_users: update(this.state.service_users, {$splice: [[index, 1]]}) });

Answer 1

我假设你有一个for循环来生成用户行。如果是这种情况，则每一行必须具有唯一的密钥，最好是用户ID或类似的东西。在那种情况下

return (
    <tr>...</tr>
)

必须更改为

return (
    <tr key={this.props.id}>...</tr>
)

除非你告诉React使用密钥，否则它只是假设顶行始终相同，只是更改已更改的值。

更新：看看这个小提琴。它不会与您的应用程序做同样的事情，但是更改状态和删除适当元素的概念应该适用： https://jsfiddle.net/jy0cgemz/

更改状态不会删除React中的输入值

1 个答案: