Как использовать данные вложенных объектов на ReactJS? - PullRequest
Новая
       38

Как использовать данные вложенных объектов на ReactJS?

4 голосов
/ 05 мая 2019

Я добавил ответ в комментарии

Я создал POST, используя Node.js. Я передал данные выглядит так в Почтальоне.

{ "Количество": 20, "With_tax": { "Цена": 200, "Валюта": "LKR" }}

Я создал <div> вот так (в классе Movie.jsx) 

 render() {
    return (
      <div className="card" style={{ width: "25rem" }}>
        <form onSubmit={this.props.onPostData}>

с налоговой ценой 

    <div
                className="wrap-input100 validate-input bg1"
                data-validate="Please Type Running Time"
              >
                <span className="label-input100">With Tax Price</span>
                <input
                  type="number"
                  name="with_tax_price"
                  placeholder="With Tax Price"
                  className="form-control"
                  onChange={this.props.onDataChange}
                />
              </div>

с налоговой единицей Div 

              <div
                className="wrap-input100 validate-input bg1"
                data-validate="Please Type Running Time"
              >
                <span className="label-input100">With Tax Currency</span>
                <input
                  type="text"
                  name="with_tax_currency"
                  placeholder="With Tax Currency"
                  className="form-control"
                  onChange={this.props.onDataChange}
                />
              </div>

в методе рендеринга я назвал класс Movie следующим образом (в классе Movies.jsk) 

class Movies extends Component {
  constructor() {
    super();

this.state 

    this.state = {
      with_tax_price: "",
      with_tax_currency: "",
      quantity: ""
    };
  }

dataChange 

  dataChange(ev) {
    this.setState({
      [ev.target.name]: ev.target.value
    });
  }

PostData 

  postData(ev) {
    ev.preventDefault();
    const with_tax_price = this.state.with_tax_price;
    const with_tax_currency = this.state.with_tax_currency;
    var with_tax;
    const quantity = this.state.quantity;

    this.setState({
      loading: true
    });

переменная данных 

    const data = {
      with_tax: { with_tax_price, with_tax_currency },
      quantity
    };

axios POST 

    axios
      .post(apiEndpoint, data)
      .then(function(response) {
        console.log(response);
      })
      .catch(function(error) {
        console.log(error);
      });
  }

метод визуализации 

  render() {
    return (
      <Movie
        onPostData={this.postData.bind(this)}
        onDataChange={this.dataChange.bind(this)}
      />
    );
  }
}

1 Ответ

0 голосов
/ 05 мая 2019

ИЗМЕНИТЬ МОЙ КОД В ЭТОМ,

в postData (ev) 

{ 
ev.preventDefault();
         const with_tax = {
              price: this.state.with_tax_price,
              currency: this.state.with_tax_currency
            };
        }

переменная данных 

 const data = {
      with_tax,
      quantity
    };
...