时间戳

首页 > 解决方案 > 在 React 中执行 onChange 函数时状态不更新

reactjs - 在 React 中执行 onChange 函数时状态不更新

问题描述

我的 React 函数正在获取用户在文本框中输入的值，console.log 显示值发生变化，但状态本身似乎没有变化。

我有一个包含客户端列表的外部 .js 文件，然后我将其导入到状态中：

const clients = [
  {
    _id: 'client1',
    name: 'Robert Beaney',
    bench: 93,
    squat: 150,
    deadlift: 209,
    total: 0,
    totalPounds: 0,
    kgAway: 0,
    poundsAway: 0,
    weight: [70, 65, 63]
  },
  {
    _id: 'client2',
    name: 'Client Two',
    bench: 60,
    squat: 135,
    deadlift: 160,
    total: 0,
    totalPounds: 0,
    kgAway: 0,
    poundsAway: 0,
    weight: [60, 55, 50]
  }
];

像这样导入状态：

state = {
 clients: getClients()
};

当用户在输入框中输入新数字时，我希望数字改变状态。我的代码如下：

    <div className="row">
      {this.state.clients.map(client => {
        return (
          <div className="client col-md-6" key={client._id}>
            <p>{client.name}</p>
            <div className="enter-totals">
              <input
                type="text"
                id="total-bench"
                defaultValue={client.bench}
                onChange={this.handleChange.bind(this)}
              />

功能是：

handleChange(e) {
 let newBench = e.target.value;
 console.log(newBench);
 this.setState({ bench: newBench });
}

但是渲染的 {client.bench} 没有任何反应

有任何想法吗？

标签： reactjs

解决方案

你不能绑定到defaultValue- 它要么是 that 要么value.

理想情况下，您只想实际更改受影响的客户端，因此您的 handleChange 应该是：

handleChange(value, clientData){
  const { clients } = this.state;
  clients.some(client => { 
    if (client._id === clientData._id){
      client.bench = value;
      return true;
    }
  });
  this.setState({ clients }); 
}

然后onChange={e => this.handleChange(e.target.value, client)};

并绑定value={client.value}输入。

由于您必须更改所有指标，因此更通用的方法也将接受“prop”作为参数，因此您可以handleChange('deadlift', value, client)自定义handleWeightChange推送到数组的位置。

然后，显然，您想要制作一个<ClientEdit client={client} onChange={} />组件等并开始使其模块化。

我只是对健身房的东西感到兴奋。制作所有指标数组，以便您可以跟踪进度和回归，并为读数加盖时间戳：D

这是一个工作示例：https ://codesandbox.io/s/545xy5q22k

推荐阅读