Javascript 有条件地更新React Json值

我不知道如何编辑Put请求中的JSON数据。（必须是Put请求）

正如您所看到的，我创建了一些输入，我需要找到一种方法来更新/添加JSON数据上的新借贷数据，这些数据的不同之处在于“to”和“from”

此外，如果是“至”增值，则必须从总余额中减少；如果是“自”增值，则必须将其添加到总余额中

我为此创建了一个选择框和一个输入（在json和组件之间没有连接） 我的更新程序组件如下所示：

组件本身：

import React, { Component } from 'react';
import './Updater.scss';
import Axios from 'axios';


export default class Updater extends Component {
    constructor(){
        super();
        this.state = {
            amount: '',
            description: '',
            from: '',
            to: '',
            date: new Date()
        }
    }


    onSubmitEdit = () => {
        Axios.put('http://localhost:8080/api/balance/add', 
        {});
    }

    render() {

        return (
            <div className="updatercontainer">
                <div className="updaterinputs">
                 <input className="amount" name="amount"  
                    type="text" placeholder="Enter Amount"/>
                 <input className="description" name="description" 
                    type="text" placeholder="Enter Description"/>
                </div>
            <div className="selectbox">
            <select>
                <option value="From">From</option>
                <option value="To">To</option>
            </select>
                <input className="fromto" type="text"
                 name="fromto" placeholder="Enter From or To Name"/>
            </div>
            <div className="selectboxcontainer">

                <div className="button-container">
                 <a href="#" onClick={this.onSubmitEdit} 
                 className="button amount-submit">
                <span></span>Update</a>
                </div>

            </div>

        </div>
        )
    }
}

import React，{Component}来自'React'；
导入“./Updater.scss”；
从“Axios”导入Axios；
导出默认类更新程序扩展组件{
构造函数（）{
超级（）；
此.state={
金额：''，
说明：“”，
从：“”，
至：''，
日期：新日期（）
}
}
onSubmitEdit=（）=>{
轴心http://localhost:8080/api/balance/add', 
{});
}
render（）{
返回(
从…起
到
)
}
}

您只需要一个onChange事件来根据输入值名称更新状态

handleChange = (e) => {
   this.setState({ [e.target.name]: e.target.value })
}

//On your inputs
<input 
    className="amount" 
    name="amount" 
    type="text" 
    placeholder="Enter Amount"
    value={this.state.amount}
    onChange={() => this.handleChange(e)}
/>

handleChange=（e）=>{
this.setState（{[e.target.name]：e.target.value}）
}
//根据你的意见
这个.handleChange（e）}
/>

类更新程序扩展React.Component{
构造函数（）{
超级（）；
此.state={
金额：0，
说明：“，
_发信人：是的，
_致：错，
日期：新日期（）
};
}
onAmountChange=e=>{
这是我的国家({
金额：e.target.value
});
};
onDescriptionChange=e=>{
这是我的国家({
描述：e.target.value
});
};
onSelectTypeChange=e=>{
console.log（如target.value）；
这是我的国家({
[e.target.value==“from”？“\u from”：“\u to”]：true，
[e.target.value！=“from”？“\u from”：“\u to”]：false
});
如果（e.target.value！==“from”&&（this.state.from！=null | | this.state.from！==”）{
这是我的国家({
致：this.state.from，
from:null
});
}else if（e.target.value==“from”&&（this.state.to！=null | | this.state.to！==”）{
这是我的国家({
从：本州到，
至：空
});
}
};
onFromToChange=（e）=>{
这是我的国家({
[此.state._from？“from”：“to”]：e.target.value
});
}
onSubmitEdit=（）=>{
Axios.put(
"https://httpbin.org/put",
{
…这个州，
},
{标题：{“内容类型”：“应用程序/json”}
)
。然后（响应=>{
//处理响应
})
.catch（错误=>{
//处理错误
});
};
render（）{
返回(
从…起
到
);
}
}

考虑阅读更多关于

---

您需要在put请求的第二个参数中传递要发送到服务器的数据。将每个输入的值存储在local state中，您将希望传递state作为PUT请求的第二个参数，就像上面John所说的，非常感谢。但我发现了一件事。我想你删除了“fromto”输入。但正如您在JSON数据上看到的，根据选择框的选择，“fromto”输入值变为“from”或“to”。这对我来说是最难的部分，我甚至没有想过逻辑。你有这个想法吗？是的，因为如果用户选择了“从”或“to”，你就可以把它应用到服务器上，如果你不能控制它，只需添加一个字段。好的，让我们考虑控制服务器来处理所选的“从”或“to”，还有一个输入值（不是布尔值）；选择了“from”并写了“John”，然后是“from”：“John”到服务器。我已经更新了，代码。。它是否满足您的要求？这是服务器端问题或路由无效。

class Updater extends React.Component {
  constructor() {
    super();
    this.state = {
      amount: 0,
      description: "",
      _from: true,
      _to: false,
      date: new Date()
    };
  }

  onAmountChange = e => {
    this.setState({
      amount: e.target.value
    });
  };
  onDescriptionChange = e => {
    this.setState({
      description: e.target.value
    });
  };
  onSelectTypeChange = e => {
    console.log(e.target.value);
    this.setState({
      [e.target.value === "from" ? "_from" : "_to"]: true,
      [e.target.value !== "from" ? "_from" : "_to"]: false
    });
    if(e.target.value !== "from" && (this.state.from != null || this.state.from !== "")) { 
      this.setState({
        to: this.state.from,
        from: null
      });
    } else if(e.target.value === "from" && (this.state.to != null || this.state.to !== "")){
      this.setState({
        from: this.state.to,
        to: null
      });
    }
  };
  onFromToChange = (e) => {
    this.setState({
       [this.state._from ? "from" : "to"]: e.target.value
    });
  }
  onSubmitEdit = () => {
    Axios.put(
      "https://httpbin.org/put",
      {
        ...this.state,  
      },
      { headers: { "Content-Type": "application/json" } }
    )
      .then(response => {
        // handle Response
      })
      .catch(err => {
        // handle Error
      });
  };

  render() {
    return (
      <div className="updatercontainer">
        <div className="updaterinputs">
          <input
            onChange={this.onAmountChange}
            className="amount"
            name="amount"
            type="text"
            placeholder="Enter Amount"
          />
          <input
            onChange={this.onDescriptionChange}
            className="description"
            name="description"
            type="text"
            placeholder="Enter Description"
          />
        </div>
        <div className="selectbox">
          <select onChange={this.onSelectTypeChange}>
            <option value="from">From</option>
            <option value="to">To</option>
          </select>
          <input onChange={this.onFromToChange} className="fromto" type="text"
               name="fromto" placeholder="Enter From or To Name"/>
        </div>
        <div className="selectboxcontainer">
          <div onClick={this.onSubmitEdit} className="button-container">
            <a href="#" className="button amount-submit">
              <span>Update</span>
            </a>
          </div>
        </div>
      </div>
    );
  }
}