從反應輸入表單獲取數據時遇到問題

Question

我只是在制作一個簡單的應用程序來學習與 redux 的反應。 我只想在服務器端的反應輸入表單中獲取數據輸入。 問題是服務器端的參數是這樣的。

{"item"=>{"name"=>"undefined","price"=>"undefined"...}...}

這是我的代碼的一部分：

import React from "react";

class ItemForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.update = this.update.bind(this);
  }


  handleSubmit(e) {
    e.preventDefault();
      const ItemData = new FormData();
      ItemData.append("item[name]", this.props.item.name);
      ItemData.append("item[price]", this.props.item.price);
    };

  update(field) {
    return (e) => {
      this.setState({ [field]: e.target.value });
    };
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <div>
            <label>
              <div>Item</div>
              <input
                type="text"
                value={this.props.item.name}
                onChange={this.update("name")}
              />
            </label>
            <label>
              <div>Price</div>
              <input
                type="number"
                value={this.props.item.price}
                onChange={this.update("price")}
              />
            </label>
            <div>
              <input type="submit" value="Submit" />
            </div>
          </div>
        </form>
      </div>
    );
  }
}

我在 redux 中使用商店 function 還是有更簡單的方法？

謝謝。

Answer 1

假設

我假設問題在於您可以在您的handleSubmit function 中訪問的數據沒有被更新，因此您總是收到初始化組件的值。

解決方案

• 根據傳入的name和price道具初始化state
• 將輸入標簽的值設置為 state 值
• 訪問您的句柄中的handleSubmit function

import React from "react";
import { withRouter } from "react-router-dom";

class ItemForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.update = this.update.bind(this);
    this.state = {
      name: this.props.item.name,
      price: this.props.item.price
    }
  }


  handleSubmit(e) {
    e.preventDefault();
      const ItemData = new FormData();
      ItemData.append("item[name]", this.state.name);
      ItemData.append("item[price]", this.state.price);
    };

  update(field) {
    return (e) => {
      this.setState({ [field]: e.target.value });
    };
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <div>
            <label>
              <div>Item</div>
              <input
                type="text"
                value={this.state.name}
                onChange={this.update("name")}
              />
            </label>
            <label>
              <div>Price</div>
              <input
                type="number"
                value={this.state.price}
                onChange={this.update("price")}
              />
            </label>
            <div>
              <input type="submit" value="Submit" />
            </div>
          </div>
        </form>
      </div>
    );
  }
}

export default withRouter(ItemForm);

其他建議

• 您的 redux 包裝器組件對此沒有任何大的影響，因此您可以將其從這個問題中刪除以清楚起見
  • 這實際上是 redux 的好處之一，連接組件（ ItemForm ）是一個常規的 React 組件，不知道它會被 redux 操作

希望有幫助！