Question

我正在使用axios get使用来自API的数据映射表。在表中，我有一个输入字段，带有来自axios数据的值，但是当我键入此输入值时，它没有变化。例如，如果输入中的是数据中的数字8，而我为salect输入，而输入中的类型5仍然是数字8。

如何解锁输入字段？

axios代码

axios
  .get("http://10.10.10.27/api?", {params : {rok : this.state.rok, idUchwaly : this.state.id}, headers: { 'Authorization' : 'Bearer '+ this.state.token }})
  .then(response =>
    response.data.map(data2 => ({
      IDA: `${data2.id}`,
      Value: `${data2.value}`,


    }))
  )
  .then(data2 => {
    if (data2==''){
      this.setState({ isLoadingdane: false });
    }
    else{
      this.setState({ data2, isLoadingdane: true});
    }
  })
  .catch(error => this.setState({ error }));

}

渲染中的映射表

    <tbody className="row">
{ this.state.isLoadingdane ? (

 data2.map(user => {
  const { IDA, Value } = user;
  return (
      <tr id={IDA}>
        <td ><p>{IDA}</p></td>
        
        <td >
        <input id={IDA} type="text" className="form-control" size="1" name="wnio" onChange={this.ChangeWniosek} value={Value} ></input>
        </td>
        <td >
          <button  onClick={() => this.edit(user)} type="button" className="btn btn-light">Zapisz</button>
        </td>
        
      </tr>

      );

发布方法的工作，更改保存在服务器上

Answer 1

您需要从data2数组中找到当前修改的对象，并用新值替换修改后的Value。

输入值永远是8，因为您从data2对象获取了输入值，该值在更改时保持不变：

const {IDA, Value} = user;
<input id={IDA} type="text" className="form-control" size="1" name="wnio" onChange={this.ChangeWniosek} value={Value} ></input>```

只有在onChange期间找到并修改data2对象中的值时，您才能看到反映的新值。

示例：

<input id={IDA} type="text" className="form-control" size="1" name="wnio" onChange={(e) => this.ChangeWniosek(e)} value={Value} ></input>

在函数中：

ChangeWniosek = (e) => {
  let { data2 } = this.state;
  data2 = data2.map(obj => {
    if (obj.IDA === e.target.id) {
      obj.Value = event.target.value
    }
    return obj;
  });
  this.setState({
    data2,
    Value: event.target.value
  });
}

让我知道这是否可行。

反应-无法更改输入中的数字

1 个答案: