Question

我没有弄清楚如何从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>
        )
    }
}

Answer 1

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>
    );
  }
}

请考虑详细了解Handling Inputs, Forms, Events

Working Sandbox!

Answer 2

您只需要一个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)}
/>

有条件地更新React Json值

2 个答案: