从反应输入表单获取数据时遇到问题

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 操作

希望有帮助！