Question

我的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}

没有任何反应

有什么想法吗？

Answer 1

您无法绑定到defaultValue-是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

Answer 2

您需要向输入元素添加值，例如value = {this.state.bench}

还初始化板凳状态。建议不要直接在render中绑定功能，而应在类似

的构造函数中进行绑定

  constructor(props){
    super(props);
     this.state = {
         clients: getClients(),
          bench: ""
     };
     this.handleChange = this.handleChange.bind(this);
  }

      <input
            type="text"
            id="total-bench"
            defaultValue={client.bench}
            value={this.state.bench}
            onChange={this.handleChange}
          />

Answer 3

尝试一下...

handleChange(id, value) {
  let clients = this.state.clients;
  let newClients = clients.map(client => {
    if(client._id === id) {
     client.bench = value;
    }
  })
  this.setState({ newClients })
}


return(
  <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"
                value={client.bench}
                onChange={e => this.handleChange(client._id, e.target.value)}
             />
           </div>
        </div>
      )})}
  </div>
 )

output

在React中执行onChange函数时状态未更新

3 个答案: